<template>
  <div class="flex flex-col">
    <a-card class="min-h-[68px] rounded my-[10px]" :body-style="{ padding: '12px 30px 50px', height: '100%' }"
      :bordered="false">
      <!-- 头部返回列表功能 -->
      <template #extra>
        <a-button class="border-none" icon="rollback" @click="$router.go(-1)">{{ $t("app.setting.themecolor.rr99") }}
        </a-button>
      </template>
      <!-- 正文头部 -->
      <div slot="title">
        <a-space>
          <div class="ty"></div>
          {{ $t(pageTitle) }}
        </a-space>
      </div>
      <a-form :form="form" layout="vertical">
        <!-- 注册识别风险 -->
        <a-form-item label="ID" v-show="false" class="hidden">
          <a-input v-decorator="['Id']" disabled />
        </a-form-item>
        <a-row>
          <a-col :span="12" v-if="$route.query.state !== 'add'">
            <a-form-item style="margin: 0" :label="$t('user.password.strength.medium66667777')">
              <a-input v-decorator="['RpaId']" placeholder="RPA001" disabled style="width: 390px" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!-- Rpa名称 -->
            <a-form-item :label="$t('user.password.strength.medium12121212')">
              <!-- 内容信息 -->
              <a-input :placeholder="$t('user.password.strength.medium222')" :disabled="disabled" style="width: 390px"
                v-decorator="[
                  'RpaName',
                  {
                    rules: [
                      {
                        required: true,
                        message: $t('user.password.strength.medium2226677'),
                      },
                    ],
                  },
                ]" />
              <!-- 提示信息 -->
              <a-tooltip>
                <template slot="title">
                  {{
                    $t(
                      "user.verification-code.required111566110577371442281431444"
                    )
                  }}
                </template>
                <a-icon type="question-circle" style="margin-left: 10px"></a-icon>
              </a-tooltip>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!-- 数据控制者 -->
            <a-form-item :label="$t('user.login.remember-me121213')">
              <!-- 内容信息 -->
              <a-select mode="multiple" @change="changeselect" @focus="handleFocus" style="width: 390px" v-decorator="[
                'RpaDataController',
                {
                  rules: [
                    {
                      required: true,
                      message: $t('user.login.forgot-password23r423'),
                    },
                  ],
                },
              ]" :placeholder="$t('user.login.forgot-password')" :disabled="disabled" option-filter-prop="children">
                <a-select-option v-for="item in systemControllerSourceData" :value="item.value"
                  :key="item.label + item.value">{{ item.label }}
                </a-select-option>
              </a-select>
              <!-- 提示信息 -->
              <a-tooltip>
                <template slot="title">
                  {{
                    $t(
                      "user.verification-code.required111566110577371442281431333"
                    )
                  }}
                </template>
                <a-icon type="question-circle" style="margin-left: 10px"></a-icon>
              </a-tooltip>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12" v-if="otherflag">
            <!-- Other内容 -->
            <a-form-item label="Other">
              <!-- 内容信息 -->
              <a-input :disabled="disabled" style="width: 390px" v-decorator="[
                'RpaDataControllerOther',
                {
                  rules: [
                    {
                      required: true,
                      message: $t(
                        'user.verification-code.required111566110577336'
                      ),
                    },
                  ],
                },
              ]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <!-- 业务负责人 -->
            <a-form-item :label="$t('user.password.strength.low1114545')" :colon="false" labelAlgin="left">
              <a-select :placeholder="$t('user.password.strength.low111222')" show-search v-model="inputValue"
                @search="filte1rOption" :showArrow="false" :filter-option="false" allowClear v-decorator="[
                  'RpaLeaderMaster',
                  {
                    rules: [
                      {
                        required: true,
                        message: $t('user.password.strength.low111222234534'),
                      },
                    ],
                  },
                ]" style="width: 390px" :disabled="disabled">
                <a-select-option v-for="item in userList" :value="item.value" :key="item.label + item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!-- 业务备选负责人 -->
            <a-form-item :label="$t('user.password.strength.low222q3214')" :colon="false" labelAlgin="left">
              <a-select :placeholder="$t('user.password.strength.low22222212')" v-decorator="['RpaLeaderRetinue']"
                show-search :default-active-first-option="false" v-model="inputValue" @search="filte1rOption"
                :showArrow="false" :filter-option="false" style="width: 390px" allowClear :disabled="disabled">
                <a-select-option v-for="item in userList" :value="item.value" :key="item.label + item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <!-- 业务主要目的 -->
            <a-form-item>
              <span slot="label" style="white-space: normal">{{
                $t("user.verification-code.required1122")
              }}</span>

              <a-select :placeholder="$t('bussic.target.select')" :showArrow="false" :filter-option="false" allowClear
                showArrow @change="changePurposeSelect" v-decorator="[
                  'RpaObjective',
                  {
                    rules: [
                      {
                        required: true,
                        message: $t('user.verification-code.required11oo3245'),
                      },
                    ],
                  },
                ]" style="width: 390px" :disabled="disabled">
                <a-select-option v-for="item in [
                  'bussic.target.a',
                  'bussic.target.b',
                  'bussic.target.c',
                  'bussic.target.d',
                  'bussic.target.e',
                  'bussic.target.f',
                  'bussic.target.g',
                  'bussic.target.h',
                ]" :value="item" :key="item" :title="$t(item)">
                  {{ $t(item) }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12" v-if="otherPurpose">
            <!-- 业务目的的补充 -->
            <a-form-item :label="$t('bussic.target.supplement')">
              <a-input :placeholder="$t('user.password.strength.low111222444')" show-search v-model="inputValue"
                @search="filte1rOption" :showArrow="false" :filter-option="false" allowClear v-decorator="[
                  'RpaObjectiveOther',
                  {
                    rules: [
                      {
                        required: true,
                        message: $t('user.password.strength.low11122223453455'),
                      },
                    ],
                  },
                ]" style="width: 390px" :disabled="disabled" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <!-- 请说明业务活动发生的频率 -->
            <a-form-item :label="$t('user.verification-code.required11156611057737144123123')
              ">
              <a-select :placeholder="$t('user.verification-code.required111566110577371446')
                " v-decorator="[
    'RpaProcessingActivityCycle',
    {
      rules: [
        {
          required: true,
          message: $t(
            'user.verification-code.required111566110577371449'
          ),
        },
      ],
    },
  ]" show-search option-filter-prop="children" :filter-option="filterOption" style="width: 390px"
                allowClear :disabled="disabled">
                <a-select-option v-for="item in RpaProcessingActivityCycleList" :value="item.value"
                  :key="item.label + item.value">
                  {{ $t(item.label) }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <!-- 数据处理频率 -->
            <a-form-item>
              <span slot="label">{{
                $t("user.verification-code.required111566110577371447")
              }}</span>
              <a-input :placeholder="$t('user.verification-code.required111566110577371448')
                  " style="width: 390px" v-decorator="[
      'RpaFrequency',
      {
        rules: [
          {
            required: true,
            message: $t(
              'user.verification-code.required11156611057737144966666'
            ),
          },
        ],
      },
    ]" :disabled="disabled" />
              <!-- 提示信息 -->
              <a-tooltip>
                <template slot="title">
                  {{
                    $t(
                      "user.verification-code.required111566110577371442281431222"
                    )
                  }}
                </template>
                <a-icon type="question-circle" style="margin-left: 10px"></a-icon>
              </a-tooltip>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!-- 数据存储期限 -->
            <a-form-item :label="$t('user.verification-code.required111566110577371441167547')
              ">
              <a-input v-decorator="[
                'RpaStoragePeriod',
                {
                  rules: [
                    {
                      required: true,
                      message: $t(
                        'user.verification-code.required111566110577376'
                      ),
                    },
                  ],
                },
              ]" :placeholder="$t('user.verification-code.required1115661105773714412')
  " :disabled="disabled" style="width: 390px" />
              <!-- 提示信息 -->
              <a-tooltip>
                <template slot="title">
                  {{
                    $t(
                      "user.verification-code.required11156611057737144228143122299"
                    )
                  }}
                </template>
                <a-icon type="question-circle" style="margin-left: 10px"></a-icon>
              </a-tooltip>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <!-- 涉及个人信息主体的数量 -->
            <a-form-item :label="$t('user.verification-code.required1115661105773714413123')
              ">
              <a-select v-decorator="[
                'RpaNumber',
                {
                  rules: [
                    {
                      required: true,
                      message: $t(
                        'user.verification-code.required1115661105773714414'
                      ),
                    },
                  ],
                },
              ]" show-search option-filter-prop="children" :filter-option="filterOption" :placeholder="$t('user.verification-code.required1115661105773714415')
  " allowClear style="width: 390px" :disabled="disabled">
                <a-select-option v-for="items in RpaNumberList" :value="items.value" :key="items.label + items.value">{{
                  $t(items.label) }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!-- 涉及敏感个人信息主体的数量 -->
            <a-form-item :label="$t('user.verification-code.required1115661105773714416')">
              <a-select v-decorator="[
                'RpaSensitiveNumber',
                {
                  rules: [
                    {
                      required: true,
                      message: $t(
                        'user.verification-code.required1115661105773714418'
                      ),
                    },
                  ],
                },
              ]" show-search option-filter-prop="children" :filter-option="filterOption" :placeholder="$t('user.verification-code.required1115661105773714417')
  " style="width: 390px" allowClear :disabled="disabled">
                <a-select-option v-for="items in RpaSensitiveNumberList" :value="items.value"
                  :key="items.label + items.value">{{ $t(items.label) }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 处理活动的系统或网络环境 -->
        <a-row>
          <a-col :span="12">
            <!-- 本次业务活动是否涉及线上处理活动 -->
            <a-form-item :label="$t('user.verification-code.required1115661105773714422')">
              <a-select v-decorator="[
                'RpaCollectionChannels',
                {
                  rules: [
                    {
                      required: true,
                      message: $t(
                        'user.verification-code.required11156611057737144224545'
                      ),
                    },
                  ],
                },
              ]" @change="onChanges" show-search option-filter-prop="children" :filter-option="filterOption"
                :placeholder="$t('user.verification-code.required11156611057737144221')
                  " allowClear style="width: 390px" :disabled="disabled">
                <a-select-option v-for="items in RpaCollectionChannelsList" :value="items.value"
                  :key="items.label + items.value">{{ $t(items.label) }}
                </a-select-option>
              </a-select>
              <!-- 提示信息 -->
              <a-tooltip>
                <template slot="title">
                  {{
                    $t(
                      "user.verification-code.required11156611057737144228143122288"
                    )
                  }}
                </template>
                <a-icon type="question-circle" style="margin-left: 10px"></a-icon>
              </a-tooltip>
            </a-form-item>
          </a-col>
          <a-col :span="12" v-if="changvalue == 1">
            <a-form-item :label="$t('user.verification-code.required1115661105773714419')">
              <a-select v-decorator="[
                'RpaSystemNetwork',
                {
                  rules: [
                    {
                      required: true,
                      message: $t(
                        'user.verification-code.required1115661105773714421'
                      ),
                    },
                  ],
                },
              ]" show-search option-filter-prop="children" :filter-option="filterOption" :placeholder="$t('user.verification-code.required1115661105773714420')
  " allowClear style="width: 390px" :disabled="disabled">
                <a-select-option v-for="items in RpaSystemNetworkList" :value="items.value"
                  :key="items.label + items.value">{{ $t(items.label) }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">

            <div style="color: rgba(0, 0, 0, 0.85);padding: 0 0 8px;">
              <span
                style="font-family: SimSun, sans-serif;margin-right: 4px;color: #f5222d;font-size: 14px;line-height: 1;">*</span>
              {{ $t("user.verification-code.requiredtuoxuanone111") }}
            </div>
            
            <a-form-item>
              <p>
                {{ $t("user.verification-code.required11156611057737144222") }}
              </p>
              <!-- 文件上传 -->

              <a-upload name="file" :file-list="fileLists" :remove="fn" :customRequest="handleChange"
                :disabled="disabled">
                <a-button :disabled="disabled">
                  <a-icon type="upload" />
                  {{ $t("user.verification-code.required111566163") }}
                </a-button>
              </a-upload>
            </a-form-item>
            <!-- 数据流图描述 -->
            <a-form-item>
              <span slot="label" style="white-space: normal">{{
                $t("user.verification-code.required11156611057737144223")
              }}</span>
              <a-textarea v-decorator="['RpaDataFlowDiagramDescribe']" v-model="initFromData.RpaDataFlowDiagramDescribe" :auto-size="{ minRows: 3, maxRows: 7 }"
                style="width: 490px" :placeholder="$t('user.verification-code.required11156611057737144224')
                  " :disabled="disabled" />
            </a-form-item>

            <div style="color: rgba(0, 0, 0, 0.85);padding: 0 0 8px;">
              <span
                style="font-family: SimSun, sans-serif;margin-right: 4px;color: #f5222d;font-size: 14px;line-height: 1;">*</span>
              {{ $t("user.verification-code.requiredtuoxuanone222") }}
            </div>

            <a-form-item>
              <!-- 文件上传 -->
              <a-upload name="file" :file-list="RpaSystemFileLists" :multiple="true"
                :customRequest="RpaSystemHandleChange" :remove="fn1" :disabled="disabled">
                <a-button :disabled="disabled">
                  <a-icon type="upload" />
                  {{ $t("user.verification-code.required111566163") }}
                </a-button>
              </a-upload>
            </a-form-item>
            <!-- 系统架构图描述 -->
            <a-form-item>
              <span slot="label" style="white-space: normal">{{
                $t("user.verification-code.required1115661105773714422333")
              }}</span>
              <a-textarea v-decorator="['RpaSystemArchitectureDescribe']" v-model="initFromData.RpaSystemArchitectureDescribe" :auto-size="{ minRows: 3, maxRows: 7 }"
                style="width: 490px" :placeholder="$t('user.verification-code.required1115661105773714422812')
                  " :disabled="disabled" />
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 详情数据 -->
        <a-row>
          <a-col :span="24" style="margin-left: -50px">
            <a-form-item style="margin-right: 0; margin-left: 60px">
              <div style="position: relative">
                {{ $t("user.register.email.placeholder") }}
                <div style="
                    color: red;
                    margin-top: -10px;
                    display: inline-block;
                    position: absolute;
                    top: 9px;
                    left: -10px;
                    z-index: 99;
                  ">
                  *
                </div>
              </div>
              <a-table size="middle" class="h-full overflow-x-auto" :data-source="diDataLists"
                :pagination="{ pageSize: 5 }" :scroll="{ x: 2100 }" bordered :rowKey="(record) => record.Id"
                style="margin-left: -10px; margin-top: 10px" :row-selection="{
                  selectedRowKeys: selectedRowKeys,
                  onChange: onSelectChange,
                  onSelectAll: onSelectAll,
                }">
                <!-- 相关DI -->
                <a-table-column key="DataAssetsId" data-index="DataAssetsId" width="70px">
                  <span slot="title">{{
                    $t("user.verification-code.required111566110577136")
                  }}</span>
                  <template slot-scope="text, record">
                    <a @click="showModel(record)">
                      {{ record.DataAssetsId }}
                    </a>
                    <!-- <a-button type="link" @click="delde(record)">{{ $t('app.setting.copy') }}</a-button> -->
                  </template>
                </a-table-column>
                <!--数据字段 -->
                <a-table-column key="DataItemStr" width="310px">
                  <template #title>
                    <div class="title-content">
                      {{ $t("app.setting.themecolor.dust") }}
                      <p class="little-tag">
                        {{ $t("app.setting.themecolor.dusttip.be") }}
                        <span class="blue-content">China-DG@enterprise.com</span>
                        {{ $t("app.setting.themecolor.dusttip.af") }}
                      </p>
                    </div>
                  </template>
                  <template slot-scope="text, record">
                    <span>
                      <!-- 数据字段 -->
                      <div>
                        <a-select :placeholder="$t('app.setting.themecolor.dust.select')
                          " v-model="record.DataItemsStr" show-search :show-arrow="false" :filter-option="false"
                          @focus="filterSearchInputOption" @search="filterSearchInputOption"
                          style="max-width: 280px; min-width: 140px" :disabled="disabled" @change="handleDiChange"
                          v-if="$t('app.setting.themecolor.dust') == '数据字段'" :dropdownMatchSelectWidth='false'
                          :dropdownStyle="{ width: '580px' }" >
                          <a-select-option v-for="item in dataItemsSearchData" :value="item.value"
                            :key="item.label + item.value">
                            <a-tooltip placement="topLeft">
                              <template slot="title">
                                {{ item.label }}
                              </template>
                              <span class="long-text">{{ item.label }}</span>
                            </a-tooltip>
                          </a-select-option>
                        </a-select>
                        <a-select :placeholder="$t('app.setting.themecolor.dust.select')
                          " v-model="record.DataItemsStr" show-search :show-arrow="false" :filter-option="false"
                          @focus="filterSearchInputOptionEn" @search="filterSearchInputOptionEn" @change="handleDiChange"
                          style="max-width: 400px; min-width: 150px" :disabled="disabled" v-else :dropdownMatchSelectWidth='false' :dropdownStyle="{ width: '580px' }">
                          <a-select-option v-for="item in dataItemsSearchData" :value="item.value"
                            :key="item.value + item.labelEn">
                            <a-tooltip placement="topLeft">
                              <template slot="title">
                                {{
                                  lang === "zh-CN"
                                  ? item.label
                                  : item.labelEn || item.label
                                }}
                              </template>
                              {{
                                lang === "zh-CN"
                                ? item.label
                                : item.labelEn || item.label
                              }}
                            </a-tooltip>
                          </a-select-option>
                        </a-select>
                      </div>
                    </span>
                  </template>
                </a-table-column>
                <!-- 数据级别 -->
                <a-table-column key="DataLevelStr" data-index="DataLevelStr" width="90">
                  <span slot="title">{{
                    $t("user.verification-code.required111566110577137")
                  }}</span>
                </a-table-column>
                // 数据敏感度
                <a-table-column key="DataSensitivityStr" data-index="DataSensitivityStr" width="180">
                  <span slot="title">{{
                    $t("user.verification-code.required111566110577138")
                  }}</span>
                </a-table-column>
                <a-table-column key="DetailNecessity" :title="$t('user.verification-code.required1115661105771399999')" width="200px">
                  <template slot-scope="text, record">
                    <span>
                      <!-- 数据处理必要性 -->
                      <a-input v-model="record.DetailNecessity" :placeholder="$t('user.verification-code.required111566110577139')
                        " :disabled="disabled" @blur="inputBlur" v-if="inputShow" />
                    </span>
                  </template>
                </a-table-column>
                <a-table-column key="DataCity" :title="$t('user.verification-code.required1199')">
                  <template slot-scope="text, record">
                    <span>
                      <!-- 城市 -->
                      <div>
                        <a-select v-model="record.DataCity" :placeholder="$t('user.verification-code.required1199')
                          " style="max-width: 300px; min-width: 120px" :disabled="disabled" mode="multiple"
                          option-filter-prop="children" @change="$forceUpdate()">
                          <a-select-option v-for="item in sonfigurationItemsContent" :value="item.value"
                            :key="item.label + item.value">
                            {{ item.label }}
                          </a-select-option>
                        </a-select>
                      </div>
                    </span>
                  </template>
                </a-table-column>
                <!-- 数据存放地点 -->
                <a-table-column key="DataDeposit" :title="$t('user.verification-code.required1115661105771400000')" width="230px">
                  <template slot-scope="text, record">
                    <span>
                      <!-- 数据存放地点 -->
                      <a-select v-model="record.DataDeposit" option-filter-prop="children" :placeholder="$t(
                        'user.verification-code.required1115661105771400000'
                      )
                        " style="max-width: 300px; min-width: 140px" :disabled="disabled" mode="multiple"
                        :filter-option="false" @search="positionSearch" @change="$forceUpdate()" :dropdownMatchSelectWidth='false'>
                        <a-select-option v-for="item in fonfigurationItemsContent" :value="item.value"
                          :key="item.label + item.value">
                          <a-tooltip placement="topLeft">
                            <template slot="title">
                              {{ item.label }}
                            </template>
                            <span class="long-text">{{ item.label }}</span>
                          </a-tooltip>
                        </a-select-option>
                      </a-select>
                    </span>
                  </template>
                </a-table-column>
                <!-- 来源 -->
                <a-table-column key="DataSource" :title="$t('user.register-result.msg')" width="250px">
                  <template slot-scope="text, record">
                    <span>
                      <div class="conter">
                        <a-select v-model="record.DataSource" :placeholder="$t('user.register-result.msg')"
                          option-filter-prop="children" :filter-option="false" style="max-width: 400px; min-width: 200px"
                          mode="multiple" :disabled="disabled" @search="fetchUser" @focus="fetchUser" :dropdownMatchSelectWidth='false' :dropdownStyle="{ width: '380px' }">
                          <template slot="notFoundContent">
                            <center>
                              <a-button type="dashed" @click="onChange1(record, 'DataSource')"
                                v-if="!appidLists.length">{{ $t("rpa.form.AddApplication") }}
                              </a-button>
                            </center>
                          </template>
                          <a-select-option v-for="(item, ind) in appidLists" :value="item.value" :key="ind + item.value">
                            <a-tooltip placement="topLeft">
                              <template slot="title">
                                {{ item.label }}
                              </template>
                              <span class="long-text">{{ item.label }}</span>
                            </a-tooltip>
                          </a-select-option>
                        </a-select>
                      </div>
                    </span>
                  </template>
                </a-table-column>
                <!-- 目的地 -->
                <a-table-column key="DataDestination" :title="$t('user.register-result.activation-email')">
                  <template slot-scope="text, record">
                    <span>
                      <div class="conter">
                        <a-select mode="multiple" v-model="record.DataDestination" @search="fetchUser" @focus="fetchUser"
                          :disabled="disabled" option-filter-prop="children" :placeholder="$t('user.register-result.activation-email')
                            " style="max-width: 400px; min-width: 200px" :filter-option="false" :dropdownMatchSelectWidth='false' :dropdownStyle="{ width: '380px' }">
                          <template slot="notFoundContent">
                            <center>
                              <a-button type="dashed" @click="onChange1(record, 'DataDestination')"
                                v-if="!appidLists.length">{{ $t("rpa.form.AddApplication") }}
                              </a-button>
                            </center>
                          </template>
                          <a-select-option v-for="item in appidLists" :value="item.value" :key="item.label + item.value">
                            <a-tooltip placement="topLeft">
                              <template slot="title">
                                {{ item.label }}
                              </template>
                              <span class="long-text">{{ item.label }}</span>
                            </a-tooltip>
                          </a-select-option>
                        </a-select>
                      </div>
                    </span>
                  </template>
                </a-table-column>
                // 操作
                <a-table-column key="action" :title="$t('app.setting.othersettings')" v-if="!disabled" width="75px">
                  <template slot-scope="text, record">
                    <span>
                      <!-- 删除 -->
                      <a-popconfirm :title="$t('user.verification-code.required111566110577225')
                        " :ok-text="$t('user.verification-code.required1166')"
                        :cancel-text="$t('user.email.required11')" @confirm="() => delxiangqing(record, state)"
                        v-if="!disabled">
                        <a-button type="link" size="small">{{
                          $t("menu.exception.trigger")
                        }}</a-button>
                      </a-popconfirm>
                    </span>
                  </template>
                </a-table-column>
              </a-table>
              <a-modal v-model="batchVisible" width="600px">
                <a-space>
                  <div class="ty"></div>
                  {{ $t("user.editcontent") }}
                </a-space>
                <a-form :form="batchUpForm" :label-col="{ span: 14 }" :wrapper-col="{ span: 10 }" layout="horizontal"
                  labelAlign="left">
                  <a-checkbox-group @change="onChange" v-model="checkedValues">
                    <div class="flex-row">
                      <a-checkbox value="DetailNecessity"></a-checkbox>
                      <a-form-item :label="$t(
                        'user.verification-code.required1115661105771399999'
                      )
                        ">
                        <a-input v-decorator="['DetailNecessity']" :placeholder="$t('user.verification-code.required111566110577139')
                          " @change="onChange(checkedValues)"></a-input>
                      </a-form-item>
                    </div>
                    <div class="flex-row">
                      <a-checkbox value="DataCity"></a-checkbox>
                      <a-form-item :label="$t('user.verification-code.required1199')">
                        <a-select v-decorator="['DataCity']" :placeholder="$t('user.verification-code.required1199')
                          " mode="multiple" option-filter-prop="children" @change="onChange(checkedValues)">
                          <a-select-option v-for="item in sonfigurationItemsContent" :value="item.value"
                            :key="item.label + item.value">
                            {{ item.label }}
                          </a-select-option>
                        </a-select>
                      </a-form-item>
                    </div>
                    <div class="flex-row">
                      <a-checkbox value="DataDeposit"></a-checkbox>
                      <a-form-item :label="$t(
                        'user.verification-code.required1115661105771400000'
                      )
                        ">
                        <a-select v-decorator="['DataDeposit']" :placeholder="$t(
                          'user.verification-code.required1115661105771400000'
                        )
                          " option-filter-prop="children" mode="multiple" :filter-option="false"
                          @change="onChange(checkedValues)" @search="positionSearch">
                          <a-select-option v-for="item in fonfigurationItemsContent" :value="item.value"
                            :key="item.label + item.value">
                            <a-tooltip placement="topLeft">
                              <template slot="title">
                                {{ item.label }}
                              </template>
                              {{ item.label }}
                            </a-tooltip>
                          </a-select-option>
                        </a-select>
                      </a-form-item>
                    </div>
                    <div class="flex-row">
                      <a-checkbox value="DataSource"></a-checkbox>
                      <a-form-item :label="$t('user.register-result.msg')">
                        <a-select :placeholder="$t('user.register-result.msg')" option-filter-prop="children"
                          :filter-option="false" mode="multiple" v-decorator="['DataSource']" :disabled="disabled"
                          @search="fetchUser" @focus="fetchUser" @change="onChange(checkedValues)">
                          <template slot="notFoundContent">
                            <center>
                              <a-button type="dashed" @click="onChange1(null, 'DataSource')" v-if="!appidLists.length">{{
                                $t("rpa.form.AddApplication") }}
                              </a-button>
                            </center>
                          </template>
                          <a-select-option v-for="(item, ind) in appidLists" :value="item.value" :key="ind + item.value">
                            <a-tooltip placement="topLeft">
                              <template slot="title">
                                {{ item.label }}
                              </template>
                              {{ item.label }}
                            </a-tooltip>
                          </a-select-option>
                        </a-select>
                      </a-form-item>
                    </div>
                    <div class="flex-row">
                      <a-checkbox value="DataDestination"></a-checkbox>
                      <a-form-item :label="$t('user.register-result.activation-email')">
                        <a-select mode="multiple" :disabled="disabled" option-filter-prop="children" :placeholder="$t('user.register-result.activation-email')
                          " :filter-option="false" v-decorator="['DataDestination']" @search="fetchUser"
                          @focus="fetchUser" @change="onChange(checkedValues)">
                          <template slot="notFoundContent">
                            <center>
                              <a-button type="dashed" @click="onChange1(null, 'DataDestination')"
                                v-if="!appidLists.length">{{ $t("rpa.form.AddApplication") }}
                              </a-button>
                            </center>
                          </template>
                          <a-select-option v-for="item in appidLists" :value="item.value" :key="item.label + item.value">
                            <a-tooltip placement="topLeft">
                              <template slot="title">
                                {{ item.label }}
                              </template>
                              {{ item.label }}
                            </a-tooltip>
                          </a-select-option>
                        </a-select>
                      </a-form-item>
                    </div>
                  </a-checkbox-group>
                </a-form>
                <div
                  class="flex absolute right-0 bottom-0 w-full px-4 py-[10px] bg-white text-left z-1 flex justify-center">
                  <a-button class="border-none hover:bg-[#3F8CFF] hover:bg-opacity-5 shadow mr-[20px]" @click="close">{{
                    $t("user.email.required11") }}</a-button>
                  <a-button class="border-none shadow" type="primary" :disabled="!checkedValues.length || btnDisabled"
                    @click="submit">{{ $t("user.email.required1111") }}
                  </a-button>
                </div>
              </a-modal>
              <!-- 批量更新按钮 -->
              <a-button type="primary" class="batchup-btn mr-[10px]" :disabled="!selectedRowKeys.length"
                @click="batchup">{{ $t("user.batchup") }}
              </a-button>
              <a-tooltip placement="top">
                <template slot="title">
                  <div>
                    {{ $t("user.verification-code.tooltiptitle") }}
                  </div>
                  <span>{{ $t("user.verification-code.tooltipcontent") }}</span>
                </template>
                <a-icon type="question-circle" />
              </a-tooltip>
              <!-- 从DI导出 -->
              <a-button type="link" class="import-butoon" icon="vertical-align-bottom" @click="openModal"
                v-if="!disabled">{{ $t("user.verification-code.required1144") }}
              </a-button>
              <!-- 新增数据字段 -->
              <a-button type="link" class="import-butoon" @click="createDataModal" v-if="!disabled">{{
                $t("app.setting.themecolor.gggg") }}
              </a-button>
            </a-form-item>
          </a-col>
        </a-row>
        <!--  单选内容-->
        <div class="checkbox">
          <a-form-item>
            <span slot="label" style="white-space: normal">{{
              $t("user.verification-code.required1133")
            }}</span>
            <a-checkbox-group :disabled="disabled" v-decorator="[
              'RpaActivityCycle',
              {
                rules: [
                  {
                    required: true,
                    message: $t(
                      'user.verification-code.required1133346574534263'
                    ),
                  },
                ],
              },
            ]" class="a-checkbox-group">
              <a-checkbox :style="radioStyle" :value="item.value" v-for="(item, i) in dataProcessingActivityCycleData"
                :key="i">
                {{ item.label }}
                <!-- 提示信息 -->
                <template v-if="item.annotation || item.annotationEn">
                  <a-tooltip>
                    <template slot="title">
                      {{ item.annotation || item.annotationEn }}
                    </template>
                    <a-icon type="question-circle"></a-icon>
                  </a-tooltip>
                </template>
              </a-checkbox>
            </a-checkbox-group>
          </a-form-item>
          <a-form-item>
            <span slot="label">{{
              $t("user.verification-code.required1155")
            }}</span>
            <a-checkbox-group v-decorator="['RpaActivityType']" class="a-checkbox-group-1" :disabled="disabled">
              <div v-for="ind of Math.ceil(processingActivityTypesData.length / 4)"
                :key="processingActivityTypesData[ind].value + ind" class="a-checkbox-group">
                <a-checkbox :style="radioStyle" :value="item.value" v-for="(item, i) in processingActivityTypesData.slice(
                  4 * ind - 4,
                  4 * ind
                )" :key="i">
                  {{ item.label }}
                  <!-- 提示信息 -->
                  <template v-if="item.annotation || item.annotationEn">
                    <a-tooltip>
                      <template slot="title">
                        {{ item.annotation || item.annotationEn }}
                      </template>
                      <a-icon type="question-circle"></a-icon>
                    </a-tooltip>
                  </template>
                </a-checkbox>
              </div>
            </a-checkbox-group>
          </a-form-item>
        </div>
        <div v-if="detailStatus">
          <a-form-item :label="$t('user.verification-code.required1114')">
            <a-input placeholder="XXX" disabled />
          </a-form-item>
          <br />
          <a-form-item :label="$t('user.verification-code.required1115')">
            <a-input placeholder="2023/3/10 15:45" disabled />
          </a-form-item>
          <br />
          <a-form-item :label="$t('user.verification-code.required111566')">
            <a-input placeholder="2023/3/10 15:45" disabled />
          </a-form-item>
          <br />
        </div>
        <div class="line" v-if="$route.query.state !== 'add'"></div>
        <a-descriptions :column="1" v-if="$route.query.state !== 'add'">
          <a-descriptions-item :label="$t('user.verification-code.required1115661105793')">{{ rpaInfo.RpaCreatePeopleStr
          }}</a-descriptions-item>
          <a-descriptions-item :label="$t('user.verification-code.required111566131')">{{ rpaInfo.RpaCreatetime
          }}</a-descriptions-item>
          <a-descriptions-item :label="$t('user.verification-code.required1115661105752')">{{ rpaInfo.RpaUpdatetime
          }}</a-descriptions-item>
        </a-descriptions>
      </a-form>
      <div :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'center',
          zIndex: 1,
        }">
        <!-- 提交 -->
        <a-button v-if="!disabled" type="primary" @click="submitadd()" style="margin-right: 20px">{{
          $t("user.verification-code.required11668888") }}
        </a-button>
        <!-- 保存草稿 -->
        <a-button v-if="!disabled" @click="submitSave('edit')" style="margin-right: 20px">{{
          $t("user.register-result.view-mailbox") }}
        </a-button>
        <!-- 返回 -->
        <a-button style="margin-right: 8px" @click="cancellation">{{ $t("user.email.required11") }}
        </a-button>
      </div>
    </a-card>

    <!-- 从DI导入 -->
    <a-modal :visible="visible" @ok="handleDiSubmit" @cancel="handleDiCancel" width="800px"
      :ok-text="$t('user.verification-code.required1166')" :cancel-text="$t('user.email.required11')">
      <a-form layout="inline">
        <a-form-item :label="$t('user.verification-code.required1177')">
          <a-select show-search option-filter-prop="children" v-model="handleChangeAssetsSelect"
            @change="handleChangeAssets" :placeholder="$t('user.verification-code.required1188')" style="width: 220px">
            <a-select-option v-for="items in rpaSelectAssetNameData" :value="items.value"
              :key="items.label + items.value">{{ items.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>


      <a-table size="middle" class="h-full table-di overflow-x-auto" :pagination="false" :data-source="rpaDidataLists"
        bordered :row-selection="rowSelection" :rowKey="(record) => record.Id">
        <a-table-column key="DataItemsStr" :data-index="lang === 'zh-CN' ? 'DataItemsStr' : 'DataItemsStrEn'"
          width="150px" disabled>
          <span slot="title">{{ $t("app.setting.themecolor.dust") }}</span>
        </a-table-column>
        <a-table-column key="DataCity" data-index="DataCity" width="150px" :allowClear="false"
          :noFoundContent="noFoundContentText">
          <span slot="title">{{
            $t("user.register.get-verification-code")
          }}</span>
          <template slot-scope="text, record">
            <a-select mode="multiple" v-model="record.DataCity" disabled :placeholder="$t('user.verification-code.required111566110577338')
              " style="width: 128px">
              <a-select-option v-for="item in sonfigurationItemsContent" :value="item.value"
                :key="item.label + item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </template>
        </a-table-column>
        <!-- 数据存放地点 -->
        <a-table-column key="DataDeposit" :title="$t('user.verification-code.required111566110577140')">
          <template slot-scope="text, record">
            <span>
              <!-- 数据存放地点 -->
              <a-select v-model="record.DataDeposit" disabled width="150px" :placeholder="$t('user.verification-code.required111566110577140')
                " style="max-width: 300px; min-width: 140px" mode="multiple">
                <a-select-option v-for="item in fonfigurationItemsContent" :value="item.value"
                  :key="item.label + item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </span>
          </template>
        </a-table-column>
        <!-- 数据来源 -->
        <a-table-column key="DataSource" :title="$t('user.register-result.msg')">
          <template slot-scope="text, record">
            <span>
              <div>
                <a-select v-model="record.DataSource" :placeholder="$t('user.register-result.msg')" width="150px"
                  @search="fetchUser" disabled mode="multiple">
                  <a-select-option v-for="item in appidLists" :value="item.value" :key="item.label + item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </div>
            </span>
          </template>
        </a-table-column>
        <!-- 目的地 -->
        <a-table-column key="DataDestination" :title="$t('user.register-result.activation-email')">
          <template slot-scope="text, record">
            <span>
              <div>
                <a-select v-model="record.DataDestination" :placeholder="$t('user.register-result.activation-email')"
                  width="150px" @search="fetchUser" mode="multiple" disabled>
                  <a-select-option v-for="item in appidLists" :value="item.value" :key="item.label + item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </div>
            </span>
          </template>
        </a-table-column>
      </a-table>
    </a-modal>
    <!-- 新增数据字段 -->
    <!-- 修改按钮 -->
    <a-modal :visible="showDataFields" @ok="showCreateRpaMiniModel()" @cancel="closeDataFields()"
      :okText="$t('app.setting.content-width.fluid2222')" :cancelText="$t('app.setting.content-width.fluid2222333')">
      <a-space>
        <div class="tags"></div>
        {{ $t("user.verification-code.required1115661105773714422814") }}
      </a-space>
      <a-form layout="inline" class="mt-[15px]">
        <a-radio-group v-model="radioValue" @change="radioChange">
          <a-radio :style="radioStyle" :value="1" v-if="modestate">
            {{ $t("user.verification-code.required111566110577371442281423") }}
          </a-radio>
          <a-radio :style="radioStyle" :value="2">
            {{ $t("user.verification-code.required111566110577371442281424") }}
          </a-radio>
        </a-radio-group>
        <a-form-item>
          <a-select :placeholder="$t('user.verification-code.required1113')" v-model="diId" style="width: 220px"
            @change="changegai" v-if="modestate">
            <a-select-option v-for="items in diList" :value="items.value" :key="items.label + items.value">{{ items.label
            }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 确认，选择DPIA，创建问卷submitCreate-->
    <a-modal :visible="createQuestionStatus" @ok="handleCreateQuestionSubmit" @cancel="handleCreateQuestionCancel"
      :ok-text="$t('user.verification-code.required1166')" :cancel-text="$t('user.email.required11')" width="400px">
      <a-space>
        <div class="tags"></div>
        {{ $t("user.verification-code.required1100") }}
      </a-space>
      <a-form layout="inline" class="mt-[15px]" :form="form1">
        <!-- 关联的RPA名称 -->
        <a-form-item :label="$t('user.verification-code.required11156611027')">
          <a-input :placeholder="$t('user.verification-code.required1115661102711')"
            style="width: 300px; margin-right: 30px; margin-left: 13px" disabled v-decorator="[
              'DpiaRpaId',
              {
                rules: [
                  {
                    required: true,
                    message: $t(
                      'user.verification-code.required111566110577315'
                    ),
                  },
                ],
              },
            ]"></a-input>
        </a-form-item>
        <!-- DPIA模板 -->
        <a-form-item :label="$t('user.verification-code.required11156611028')">
          <a-select :placeholder="$t('user.verification-code.required1115661102811')"
            style="width: 309px; margin-right: 30px; margin-left: 5px" class="pl-[8px]" option-filter-prop="children"
            :filter-option="filterOption" show-search v-decorator="[
              'DpiaModelId',
              {
                rules: [
                  {
                    required: true,
                    message: $t(
                      'user.verification-code.required111566110577316'
                    ),
                  },
                ],
              },
            ]">
            <a-select-option v-for="items in dpiaSelectListsData" :value="items.value" :key="items.label + items.value">{{
              items.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <!-- DPIA的名称 -->
        <a-form-item :label="$t('menu.account.logout1122992277994544543265')">
          <a-input v-decorator="[
            'DpiaName',
            {
              rules: [
                {
                  required: true,
                  message: $t('menu.account.logout1122992277994544543265444'),
                },
              ],
            },
          ]" :placeholder="$t('menu.account.logout1122992277994544543265444')"
            style="width: 300px; margin-right: 30px; margin-left: 13px"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 禁止退出当前页面弹窗，点击下方三个任意按钮后可以离开 -->
    <a-modal v-model="ifvisible" :title="$t('app.setting.themecolor.rr100')" on-ok="handleOk">
      <template slot="footer">
        <span></span>
      </template>
      <div class="dlex">
        <a-button type="primary" @click="rollback">
          {{ $t("app.setting.themecolor.rr101") }}
        </a-button>
        <a-button type="primary" @click="submitSave()">
          {{ $t("app.setting.themecolor.rr102") }}
        </a-button>
        <a-button @click="ifvisible = false">
          {{ $t("app.setting.themecolor.rr103") }}
        </a-button>
      </div>
    </a-modal>
    <!-- 大抽屉 -->
    <a-drawer :title="modalTitle" placement="right" :closable="false" :visible="modalVisible" :width="1200"
      :rowKey="(record) => record.Id" @close="closeDrawer">
      <a-form :form="diForm" ref="form" class="drawer-form" label-align="left">
        <!-- APP名称 -->
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item :label="$t('user.verification-code.required1115661105772124555')">
              <a-select :placeholder="$t(
                'user.verification-code.required1115661105772113464357654435'
              )
                " @change="handleChangeAppid" show-search option-filter-prop="children" v-decorator="[
    'DataLibraryAppidId',
    {
      rules: [
        {
          required: true,
          message: $t(
            'user.verification-code.required111566110577280'
          ),
        },
      ],
    },
  ]" disabled>
                <a-select-option v-for="item in appidLists" :value="item.value" :key="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <!-- APP负责人 -->
            <a-form-item :label="$t('user.login.mobile.verification-code.placeholder')">
              <a-input v-decorator="['AppidMaster']" :placeholder="$t('user.login.mobile.verification-code.placeholder11')
                " disabled />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :label="$t('user.login.password.placeholder')">
              <a-input v-decorator="['AppidDepartMent']" :placeholder="$t('user.login.message-invalid-credentials')"
                disabled />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="enterprise APP ID">
              <a-input v-decorator="['BmwAppId']" placeholder="enterprise APP ID" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="企业 APP ID">
              <a-input v-decorator="['BbaAppId']" placeholder="企业 APP ID" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="Feature ID">
              <a-input v-decorator="['FeatherId']" placeholder="Feature ID" disabled />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item :label="$t('user.verification-code.required1115661105771411111')">
              <a-input v-decorator="['DataLibraryUser']" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :label="$t('user.verification-code.required111566110577142')">
              <a-input v-decorator="['DataLibraryCreateTime']" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :label="$t('user.verification-code.required111566110577143')">
              <a-input v-decorator="['DataLibraryUpdateTime']" disabled />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <!-- 数据控制者 -->
            <a-form-item :label="$t('user.login.remember-me')">
              <a-select mode="multiple" @change="changeselect" option-filter-prop="children" v-decorator="[
                'DataLibraryController',
                {
                  rules: [
                    {
                      required: true,
                      message: $t('user.login.forgot-password'),
                    },
                  ],
                },
              ]" :placeholder="$t('user.login.forgot-password')" disabled>
                <a-select-option v-for="item in systemControllerSourceData" :value="item.value" :key="item.value">{{
                  item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8" v-if="otherflag">
            <a-form-item label="Other">
              <a-input v-decorator="[
                'DataLibraryControllerOther',
                {
                  rules: [
                    {
                      required: true,
                      message: $t(
                        'user.verification-code.required111566110577336'
                      ),
                    },
                  ],
                },
              ]" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <!-- 线上/线下 -->
            <a-form-item :label="$t('user.login.tab-login-credentials')">
              <a-select v-decorator="[
                'DataLibraryEnvironment',
                {
                  rules: [
                    {
                      required: true,
                      message: $t(
                        'user.verification-code.required1115661105773368800'
                      ),
                    },
                  ],
                },
              ]" show-search option-filter-prop="children" :filter-option="filterOption"
                :placeholder="$t('user.login.tab-login-mobile')" disabled>
                <a-select-option v-for="item in Xians" :value="item.value" :key="item.value">
                  {{ lang === "zh-CN" ? item.label : item.labelEn }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item label="ID" v-show="false" class="hidden">
          <a-input v-decorator="['Id']" disabled />
        </a-form-item>
        <!-- 数据详情 -->
        <a-form-item style="margin-right: 0">
          <div style="position: relative">
            <div style="
                color: red;
                margin-top: -10px;
                display: inline-block;
                top: 9px;
                z-index: 99;
              ">
              *
            </div>
            {{ $t("user.register.email.placeholder") }}
          </div>
          <template>
            <a-table size="middle" :data-source="dataDetailInfoTables" :pagination="{ pageSize: 10 }"
              :rowKey="(record) => record.key">
              <!-- 数据字段 -->
              <a-table-column key="DataItem" data-index="DataItem" width="150">
                <span slot="title">{{
                  $t("app.setting.themecolor.dust")
                }}</span>
                <!-- 表格右下角操作 -->
                <template slot-scope="text, record">
                  <!-- 数据项 -->
                  <div v-if="'RpaType' in record">
                    <a-select :placeholder="$t('app.setting.themecolor.dust')" v-model="record.DataItemStr"
                      :show-arrow="false" show-search @change="handleDiChange" @search="handleSearch"
                      option-filter-prop="children" :filter-option="false" style="max-width: 280px; min-width: 140px"
                      v-if="$t('app.setting.themecolor.dust') == '数据字段'">
                      <a-select-option v-for="item in dataItemsSearchData" :value="item.value" :key="item.value">
                        <a-tooltip placement="topLeft">
                          <template slot="title">
                            {{ item.label }}
                          </template>
                          {{ item.label }}
                        </a-tooltip>
                      </a-select-option>
                    </a-select>
                    <a-select :placeholder="$t('app.setting.themecolor.dust')" v-model="record.DataItemStr"
                      :show-arrow="false" show-search @change="handleDiChange" @search="filterSearchInputOptionEn"
                      option-filter-prop="children" :filter-option="false" style="max-width: 280px; min-width: 140px"
                      v-else>
                      <a-select-option v-for="item in dataItemsSearchData" :value="item.value" :key="item.value">
                        <a-tooltip placement="topLeft">
                          <template slot="title">
                            {{ item.labelEn }}
                          </template>
                          {{ item.labelEn }}
                        </a-tooltip>
                      </a-select-option>
                    </a-select>
                  </div>
                  <span v-else>
                    {{
                      record[
                      lang === "zh-CN" ? "DataItemsStr" : "DataItemsStrEn"
                      ]
                    }}
                  </span>
                </template>
              </a-table-column>
              <!-- 数据级别 -->
              <a-table-column key="DataLevelStr" data-index="DataLevelStr" width="50">
                <span slot="title">{{
                  $t("app.setting.themecolor.sunset")
                }}</span>
              </a-table-column>
              <!-- 数据敏感度 -->
              <a-table-column key="DataSensitiveStr" data-index="DataSensitiveStr">
                <span slot="title">{{
                  $t("app.setting.themecolor.green")
                }}</span>
              </a-table-column>
              <!-- 所在城市 -->
              <a-table-column key="DataCity" data-index="DataCity" width="150" :allowClear="false"
                :noFoundContent="noFoundContentText">
                <span slot="title">{{
                  $t("user.register.get-verification-codeeeee")
                }}</span>
                <template slot-scope="text, record">
                  <a-select mode="multiple" v-model="record.DataCity" option-filter-prop="children" :placeholder="$t('user.verification-code.required111566110577338')
                    " style="width: 128px" disabled>
                    <a-select-option v-for="item in sonfigurationItemsContent" :value="item.value" :key="item.value">
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </template>
              </a-table-column>
              <!-- 数据存储地点 -->
              <a-table-column key="DataDeposit" data-index="DataDeposit" width="150">
                <span slot="title">{{ $t("user.register.sign-innnnn") }}</span>
                <template slot-scope="text, record">
                  <a-select mode="multiple" v-model="record.DataDeposit" option-filter-prop="children" :placeholder="$t('user.verification-code.required111566110577339')
                    " style="width: 128px" disabled>
                    <a-select-option v-for="item in fonfigurationItemsContent" :value="item.value" :key="item.value">
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </template>
              </a-table-column>

              <!-- 来源 -->
              <a-table-column key="DataSource" :title="$t('user.register-result.msg')">
                <template slot-scope="text, record">
                  <span>
                    <div class="conter">
                      <a-select v-model="record.DataSource" :placeholder="$t('user.register-result.msg')"
                        option-filter-prop="children" style="max-width: 158px; min-width: 140px" disabled mode="multiple"
                        @search="fetchUser">
                        <template slot="notFoundContent">
                          <center>
                            <a-button type="dashed" @click="onChange1(record, 'DataSource')" v-if="!appidLists.length">{{
                              $t("rpa.form.AddApplication") }}
                            </a-button>
                          </center>
                        </template>
                        <a-select-option v-for="item in appidLists" :value="item.value" :key="item.value">
                          {{ item.label }}
                        </a-select-option>
                      </a-select>
                    </div>
                  </span>
                </template>
              </a-table-column>
              <!-- 目的地 -->
              <a-table-column key="DataDestination" :title="$t('user.register-result.activation-email')">
                <template slot-scope="text, record">
                  <span>
                    <div class="conter">
                      <a-select mode="multiple" v-model="record.DataDestination" disabled @search="fetchUser"
                        option-filter-prop="children" :placeholder="$t('user.register-result.activation-email')
                          " style="max-width: 158px; min-width: 140px">
                        <template slot="notFoundContent">
                          <center>
                            <a-button type="dashed" @click="onChange1(record, 'DataDestination')"
                              v-if="!appidLists.length">{{ $t("rpa.form.AddApplication") }}
                            </a-button>
                          </center>
                        </template>
                        <a-select-option v-for="item in appidLists" :value="item.value" :key="item.value">
                          {{ item.label }}
                        </a-select-option>
                      </a-select>
                    </div>
                  </span>
                </template>
              </a-table-column>

              <!-- 身份信息下的删除 -->
              <span slot="cityAction" slot-scope="text, record">
                <a-select mode="multiple" v-model="record.DataCity"
                  :placeholder="$t('user.register.get-verification-code')" style="width: 128px" v-decorator="[
                    {
                      rules: [
                        {
                          required: true,
                          message: 'Please input your note!',
                        },
                      ],
                    },
                  ]">
                  <a-select-option v-for="items in sonfigurationItemsContent" :value="items.value" :key="items.value">{{
                    items.label }}</a-select-option>
                </a-select>
              </span>
              <span slot="depositAction" slot-scope="text, record">
                <a-select v-model="record.DataDeposit" :placeholder="$t('user.register.sign-in')" style="width: 128px">
                  <a-select-option v-for="item in fonfigurationItemsContent" :value="item.value" :key="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </span>
              <span slot="sourceAction" slot-scope="text, record">
                <a-select v-model="record.DataSource" :placeholder="$t('user.register-result.msg')" style="width: 128px">
                  <a-select-option v-for="item in appidLists" :value="item.value" :key="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </span>
              <span slot="destinationAction" slot-scope="text, record">
                <a-select v-model="record.DataDestination" :placeholder="$t('user.register-result.activation-email')"
                  style="width: 128px">
                  <a-select-option v-for="item in appidLists" :value="item.value" :key="item.value">
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </span>
            </a-table>
            <!-- 发现导入 -->
            <a-button type="link" icon="vertical-align-bottom" @click="openModal" disabled>{{
              $t("user.register-result.msg6868") }}
            </a-button>
            <!-- 新增字段 -->
            <a-button type="link" disabled>{{ $t("app.setting.themecolor.gggg") }}
            </a-button>
          </template>
        </a-form-item>
      </a-form>
      <div :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'center',
        zIndex: 1,
      }">
        <a-button style="margin-right: 8px" @click="closeDrawer">{{
          $t("user.email.required11")
        }}</a-button>
      </div>
    </a-drawer>
    <Addapp ref="addappid" @child-event="getChildValue"></Addapp>
    <div class="big-box" v-if="ifLoading">
      <a-spin />
    </div>
  </div>
</template>
<script>
import { configurationSelect } from "@/api/configs";
import {
  dpiaSelectLists,
  rpaDelDetail,
  rpaDetail,
  rpaDiDetail,
  rpaSelectLists,
  rpaFileDelete,
} from "@/api/rpa/form";
import { appIdCreatexl, appIdDetail } from "@/api/appid";
import { rpaCreate } from "@/api/rpa/json";
import {
  rpaDelcsai,
  rpaSelectAssetName,
  configurationItemsFind,
} from "@/api/ytdg";
import { dataLibraryDetail } from "@/api/di/form";
// import Newdpia from './components/newdpia'
import { dpiaQuestionsCreate } from "@/api/dpia/form";
import { VolumeData } from "@/utils/util";
import { childataItems, dccDataItemsSelect } from "@/api/dcc";
import { getUserList } from "@/api/common/form";
import axios from "axios";
import storage from "store";
import { ACCESS_TOKEN } from "@/store/mutation-types";
import Addapp from "@/components/componentLibrary/addapp.vue";
import deepClone from "lodash.clonedeep";
import { getSourceData } from "@/views/rpa/common/dataSource";
import {
  RpaCollectionChannelsList,
  RpaNumberList,
  RpaProcessingActivityCycleList,
  RpaSensitiveNumberList,
  RpaSystemNetworkList,
} from "@/views/rpa/datas/rpaForm";
export default {
  name: "detail",
  components: {
    Addapp,
  },
  data() {
    return {
      keyword: "",
      timerId: "",
      // 新增选中
      radioValueCheck: false,
      // 新增RPA DPIA弹窗
      createRDPIA: true,
      // 创建DPIA问卷状态
      createQuestionStatus: false,
      dpiaId: undefined,
      rpaId: "",
      DpiaRpaId: "",
      // 默认不传ID
      types: false,
      selinput: "",
      // 配置
      config: {
        rules: [
          {
            required: true,
            message: this.$t("user.verification-code.required1113"),//请选择DPIA模板
          },
        ],
      },
      inpute: "",
      // 下面这些都是通用的
      form: this.$form.createForm(this),
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRows = selectedRows;
          console.log("this.selectedRows", this.selectedRows);
        },
      },
      handleDiSubmitStatus: false,
      // DI导入列表
      diDataLists: [],
      // 固定的下拉数据(数据存放地点)
      fonfigurationItemsContent: [],
      sonfigurationItemsContent: [],
      dataItemsSearchData: [],
      appidLists: [],
      dpiaSelectListsData: [],
      // 标题
      pageTitle: "",
      selectedRows: [],
      fileList: [],
      checkBoxValue1: [],
      plainOptions1: [],
      checkBoxValue: [],
      plainOptions: [],
      //新增数据字段的下拉
      arr11: [],
      pagination: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      userList: [],
      form1: this.$form.createForm(this),
      diForm: this.$form.createForm(this),
      modalVisible: false,
      noFoundContentText: "请选择城市",
      // 数据详情
      dataDetailInfoTables: [],
      modalTitle: "",
      rpaidd: "",
      rpaDidataLists: [],
      visible: false,
      //表格Loading
      listLoading: false,
      loading: false,
      orderInfo: {},
      drugList: [],
      trackList: [],
      systemTimeline: [],
      //di下拉
      diList: [],
      botTimeline: [],
      trackKey: "",
      zhshi: false,
      rpaListData: [],
      disabled1: false,
      // 原始数据
      systemControllerSourceData: [],
      collectionChannelsSourceData: [],
      dataProcessingActivityCycleData: [],
      processingActivityTypesData: [],
      rpaSelectAssetNameData: [],
      dataSubjectData: VolumeData,
      detailStatus: false,
      buttonState: "",
      flagstate: 0,
      handleChangeAssetsSelect: undefined,
      //处理活动周期下拉
      RpaProcessingActivityCycleList: RpaProcessingActivityCycleList,
      RpaSensitiveNumberList: RpaSensitiveNumberList,
      RpaSystemNetworkList: RpaSystemNetworkList,
      RpaCollectionChannelsList: RpaCollectionChannelsList,
      RpaNumberList: RpaNumberList,
      // 数据流图文件上传
      fileLists: [],
      //架构图文件上传
      RpaSystemFileLists: [],
      zhushi: false,
      modestate: false,
      lang: localStorage.getItem("lang").split('"')[1],
      isLang: true,
      env: process.env.VUE_APP_BASE_API,
      //新增数据字段弹窗
      showDataFields: false,
      radioStyle: {
        display: "block",
        lineHeight: "30px",
      },
      // 新增数据字段单选状态
      radioValue: 2,
      //合并di的Id
      diId: null,
      disabled: false,
      otherflag: false,
      otherPurpose: false,
      inputValue: "",
      ifFlag: false, //判断是否可以返回的标志位
      ifvisible: false, //判断是否可以返回的标志位
      temporarily: undefined, // 暂存数据
      changvalue: "",
      initFromData: {
        DiId: undefined,
        Id: undefined,
        RpaActivityCycle: undefined,
        RpaActivityType: undefined,
        RpaCollectionChannels: undefined,
        RpaDataController: undefined,
        RpaDataDetail: [],
        RpaDataFlowDiagramDescribe: undefined,
        RpaFrequency: undefined,
        RpaId: undefined,
        RpaLeaderMaster: undefined,
        RpaLeaderRetinue: undefined,
        RpaName: undefined,
        RpaNumber: undefined,
        RpaObjective: undefined,
        RpaObjectiveOther: undefined,
        RpaProcessingActivityCycle: undefined,
        RpaSensitiveNumber: undefined,
        RpaState: undefined,
        RpaStoragePeriod: undefined,
        RpaSystemArchitectureDescribe: undefined,
        RpaUpload: [],
      }, //初始化一个实体，用于数据载荷
      initDpiaFromData: {
        DpiaRpaId: undefined,
        DpiaModelId: undefined,
        DpiaName: undefined,
      }, //初始化一个实体，DPIA Model
      toPage: "",
      rpaInfo: {},
      Xians: [
        {
          label: "线上",
          labelEn: "Online",
          value: 1,
        },
        {
          label: "线下",
          labelEn: "Offline",
          value: 2,
        },
      ],
      ifValidated: false,
      batchVisible: false,
      selectedRowKeys: [],
      batchUpForm: this.$form.createForm(this),
      checkedValues: [],
      btnDisabled: false,
      cloneDiDataLists: [],
      ifLoading: false,
      tempId: 1,
      inputShow: true,
    };
  },
  created() {
    this.init();
  },
  async mounted() {
    let that = this;
    window.addEventListener("setItemEvent", function (e) {
      if (e.key == "lang") {
        that.getAllInfo();
        var lang = JSON.parse(e.value);
        if (lang === "zh-EN") {
          that.tx(1);
        //   that.filterSearchInputOptionEn();
        } else {
          that.tx();
          that.filterSearchInputOption();
        }
        that.lang = lang;
        setTimeout(() => {
          if (that.ifValidated) that.form.validateFields({ force: true });
        });
      }
    });
    // 获取列表
    const { data: appidLists } = await appIdCreatexl({ types: 1 });
    this.appidLists = appidLists;
  },
  watch: {
    async inputValue(value) {
      const { data } = await getUserList({
        UserEmail: value,
        UserName: value,
      });
      this.userList = data;
    },
  },
  methods: {
    /**
     * 父组件接收子组件传递的值
     * @param data
     */
    getChildValue(data, ifModal) {
      // 写入到数据列表中
      this.appidLists.push(data);
      this.diDataLists = deepClone(this.cloneDiDataLists);
      this.$nextTick(() => {
        // 获取到数据类型，指定赋值
        if (ifModal == 1) {
          let list =
            this.batchUpForm.getFieldValue(this.temporarily.types) || [];
          if (list.indexOf(data.value) === -1) {
            list.push(data.value);
            this.batchUpForm.setFieldsValue({
              [this.temporarily.types]: list,
            });
          }
        } else {
          var tempList = JSON.parse(JSON.stringify(this.cloneDiDataLists));
          let temp = tempList.filter(
            (item) => item.Id === this.temporarily.Id
          )[0];
          if (temp[this.temporarily.types].indexOf(data.value) === -1) {
            temp[this.temporarily.types].push(data.value);
          }
          this.diDataLists = tempList;
          this.loading = false;
        }
      });
    },
    // 打开新增
    onChange1(e, type) {
      this.temporarily = e || {};
      this.temporarily.types = type;
      this.$refs.addappid.open("", "", "", e ? 0 : 1);
      this.cloneDiDataLists = deepClone(this.diDataLists);
    },
    // 监听搜索
    async fetchUser(value) {
      // 获取APPID下拉数据
      let content = value;
      const { data: appidLists } = await appIdCreatexl({ content });
      this.appidLists = appidLists;
    },
    filte1rOption(value) {
      this.inputValue = value;
    },
    //点击确定
    async submitadd() {
      const {
        form: { validateFields },
      } = this;
      // 按钮loading
      this.loading = true;
      this.ifValidated = true;
      // validateFields 是校验form表单数据
      // force: true 是默认所有字段都校验
      // values 表单的值
      validateFields({ force: true }, async (err, values) => {
        if (!err) {
          this.ifFlag = true;
          this.ifLoading = true;
          let resValue = deepClone(values);
          if (this.diDataLists.length < 1) {
            this.$message.error(
              this.$t("user.verification-code.required111566110577342")
            );
            return;
          }

          if (this.fileLists.length === 0 && !this.initFromData.RpaDataFlowDiagramDescribe) {
            this.$message.error(this.$t("rpa.detail.tip.shujuliutu"));
            return;
          }
          if (this.RpaSystemFileLists.length === 0 && !this.initFromData.RpaSystemArchitectureDescribe) {
            this.$message.error(this.$t("rpa.detail.tip.xtjg"));
            return;
          }

          for (var i = 0; i < this.diDataLists.length; i++) {
            if (
              !this.diDataLists[i].DataCity ||
              this.diDataLists[i].DataCity.length == 0
            ) {
              this.$message.error(this.$t("menu.account.logout1122992244"));
              return;
            }
            if (
              !this.diDataLists[i].DataDeposit ||
              this.diDataLists[i].DataDeposit.length == 0
            ) {
              this.$message.error(this.$t("menu.account.logout1122992255"));

              return;
            }
            if (
              !this.diDataLists[i].DataItem ||
              this.diDataLists[i].DataDeposit.length == 0
            ) {
              this.$message.error(this.$t("menu.account.logout11229922558888"));

              return;
            }
            if (
              !this.diDataLists[i].DataSource ||
              this.diDataLists[i].DataSource.length == 0
            ) {
              this.$message.error(this.$t("menu.account.logout1122992266"));

              return;
            }
            if (
              !this.diDataLists[i].DataDestination ||
              this.diDataLists[i].DataDestination.length === 0
            ) {
              this.$message.error(this.$t("menu.account.logout1122992277"));

              return;
            }
          }
          let arr22 = [];
          let arr333 = [];
          this.diDataLists.forEach((item) => {
            arr22.push({
              value:
                Object.keys(item).indexOf("DataLibraryId") === -1
                  ? item.DetailDataLibraryId
                  : item.DataLibraryId,
              label: item.DataAssetsId,
            });
          });
          arr22.forEach((item) => {
            if (item.label != undefined) arr333.push(item);
          });

          this.arr11 = arr333;
          if (this.arr11.length == 0) {
            this.modestate = false;
          } else {
            this.diList = Array.from(
              new Set(this.arr11.map((obj) => obj.value))
            ).map((value) => this.arr11.find((obj) => obj.value === value));
            this.modestate = true;
          }

          for (var i = 0; i < this.diDataLists.length; i++) {
            if (!this.diDataLists[i].DataAssetsId) {
              this.flagstate = 1;
            }
          }
          if (this.flagstate == 1) {
            this.showDataFields = true;
            this.diId = "";
          } else {
            this.submitCreate();
            this.showDataFields = false;
            // if (this.$route.query.state == 'edit') {
            //   this.createQuestionStatus = false;
            // } else {
            this.createQuestionStatus = true;
            if (this.DpiaRpaId) {
              this.form1.setFieldsValue({
                DpiaRpaId: this.DpiaRpaId,
                DpiaModelId: this.dpiaSelectListsData[0].value,
                DpiaName: "DPIA" + this.DpiaRpaId,
              });
            }
            // this.form.setFieldsValue({DpiaRpaId:this.DpiaRpaId,DpiaName:this.DpiaRpaId})
            // }
            // 将数据做基础的处理
            if (resValue.RpaActivityCycle != undefined) {
              resValue.RpaActivityCycle = resValue.RpaActivityCycle.join();
            }
            if (resValue.RpaActivityType != undefined) {
              resValue.RpaActivityType = resValue.RpaActivityType.join();
            }
            if (resValue.RpaDataController != undefined) {
              resValue.RpaDataController =
                resValue.RpaDataController.toString();
              console.log(resValue.RpaDataController);
            }
            if (resValue.RpaSystemNetwork != undefined) {
              resValue.RpaSystemNetwork = resValue.RpaSystemNetwork.toString();
            }
            let url = [];
            //处理数据流图url
            if (this.fileLists.length > 0) {
              this.fileLists.forEach((item) => {
                let RpaUploadUrlUrl = [];
                RpaUploadUrlUrl = item.url.split("/").splice(-2, 2);
                console.log(RpaUploadUrlUrl, RpaUploadUrlUrl.join("/"));
                url.push({
                  RpaUploadUrl: RpaUploadUrlUrl.join("/"),
                  RpaUploadType: item.RpaUploadType,
                });
              });
            }
            //处理架构图url
            if (this.RpaSystemFileLists.length > 0) {
              this.RpaSystemFileLists.forEach((item) => {
                let RpaSystemFileListsUrl = [];
                RpaSystemFileListsUrl = item.url.split("/").splice(-2, 2);
                url.push({
                  RpaUploadUrl: RpaSystemFileListsUrl.join("/"),
                  RpaUploadType: item.RpaUploadType,
                });
              });
            }
            resValue.RpaUpload = url;
            // resValue.DiId = 333
            // 指定保存还是提交(1:草稿(Draft),2:上线(Active),3:下线(Offline))
            resValue.RpaState = 2;
            // DI数据详情
            resValue.RpaDataDetail = this.diDataLists;
            var tempRpaDataDetail = [];
            if (
              resValue.RpaDataDetail != null &&
              resValue.RpaDataDetail != undefined
            ) {
              for (var i = 0; i < resValue.RpaDataDetail.length; i++) {
                // 删除ID
                if (!this.types) {
                  delete resValue.RpaDataDetail[i].Id;
                }
                resValue.RpaDataDetail[i].RpaId = resValue.Id;

                if (
                  Object.keys(resValue.RpaDataDetail[i]).indexOf(
                    "DataLibraryId"
                  ) != -1
                ) {
                  if (resValue.RpaDataDetail[i].DataLibraryId != 0) {
                    resValue.RpaDataDetail[i].DetailDataLibraryId =
                      resValue.RpaDataDetail[i].DataLibraryId;
                    resValue.RpaDataDetail[i].DataItem = parseInt(
                      resValue.RpaDataDetail[i].DataItem
                    );
                  }
                } else {
                  resValue.RpaDataDetail[i].DataItem = parseInt(
                    resValue.RpaDataDetail[i].DataItem
                  );
                }
                // 公共城市字段
                var DataCityType = typeof resValue.RpaDataDetail[i].DataCity;
                if (DataCityType == "object") {
                  console.log("DataCityType:", DataCityType);
                  resValue.RpaDataDetail[i].DataCity =
                    resValue.RpaDataDetail[i].DataCity.join(",");
                } else {
                  resValue.RpaDataDetail[i].DataCity =
                    resValue.RpaDataDetail[i].DataCity.toString();
                }

                // 数据存放地
                var DataDepositType =
                  typeof resValue.RpaDataDetail[i].DataDeposit;
                if (DataDepositType == "object") {
                  resValue.RpaDataDetail[i].DataDeposit =
                    resValue.RpaDataDetail[i].DataDeposit.join(",");
                } else {
                  resValue.RpaDataDetail[i].DataDeposit =
                    resValue.RpaDataDetail[i].DataDeposit.toString();
                }

                // 数据来源
                var DataSourceType =
                  typeof resValue.RpaDataDetail[i].DataSource;
                if (DataSourceType == "object") {
                  resValue.RpaDataDetail[i].DataSource =
                    resValue.RpaDataDetail[i].DataSource.join(",");
                } else {
                  resValue.RpaDataDetail[i].DataSource =
                    resValue.RpaDataDetail[i].DataSource.toString();
                }

                // 数据目的地
                var DataDestinationType =
                  typeof resValue.RpaDataDetail[i].DataDestination;
                if (DataDestinationType == "object") {
                  console.log("DataDestinationType:", DataDestinationType);
                  resValue.RpaDataDetail[i].DataDestination =
                    resValue.RpaDataDetail[i].DataDestination.join(",");
                } else {
                  resValue.RpaDataDetail[i].DataDestination =
                    resValue.RpaDataDetail[i].DataDestination.toString();
                }
                tempRpaDataDetail.push(resValue.RpaDataDetail[i]);
              }
              resValue.RpaDataDetail = tempRpaDataDetail;
            }
            this.$message.success(
              this.$t("user.verification-code.required111566110577308")
            );
            this.createDataModal = true;
          }
        } else {
          setTimeout(() => {
            this.ifLoading = false;
          }, 600);
        }
        this.ifLoading = false;
      });
      this.ifLoading = false;
    },
    onChanges(e) {
      this.changvalue = e;
      console.log("e", e);
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.indexOf(input.toLowerCase()) >=
        0
      );
    },
    async filterSearchInputOption(inputs, option) {
      //数据详情的数据字段
      const { data: dataItemsSearchData } = await dccDataItemsSelect({
        search: inputs,
      });
      this.dataItemsSearchData = dataItemsSearchData;
    },
    async filterSearchInputOptionEn(inputs, option) {
      //数据详情的数据字段
      this.dataItemsSearchData = [];
      const { data: dataItemsSearchData } = await dccDataItemsSelect({
        search: inputs,
      });
      for (var i = 0; i < dataItemsSearchData.length; i++) {
        this.dataItemsSearchData.push({
          label: dataItemsSearchData[i].labelEn,
          value: dataItemsSearchData[i].value,
        });
      }
    },
    //新增数据字段下拉
    changegai(value) {
      console.log("xxxxxx:", value);
      console.log("value-------", value);
      this.diId = value;
    },
    //回显到input
    selectinput(value) {
      console.log(value);
      console.log(this.rpaListData);
      this.selinput = value;
      let inpute = "";
      for (let i = 0; i < this.rpaListData.length; i++) {
        if (this.rpaListData[i].value == value) {
          inpute = this.rpaListData[i].label;
        }
      }
      this.inpute = inpute;
      console.log("this.inpue", this.inpute);
      this.form.setFieldsValue({ DpiaName: this.inpute });
    },
    async tx(types) {
      if (types == 1) {
        // 加载数据处理活动周期
        const { data: dataProcessingActivityCycleData } =
          await configurationSelect({ state: 6, types: 1 });
        this.dataProcessingActivityCycleData = dataProcessingActivityCycleData;
        // 加载数据处理活动类型
        const { data: processingActivityTypesData } = await configurationSelect(
          { state: 7, types: 1 }
        );
        this.processingActivityTypesData = processingActivityTypesData;
      } else {
        // 加载数据处理活动周期
        const { data: dataProcessingActivityCycleData } =
          await configurationSelect({ state: 6 });
        this.dataProcessingActivityCycleData = dataProcessingActivityCycleData;
        // 加载数据处理活动类型
        const { data: processingActivityTypesData } = await configurationSelect(
          { state: 7 }
        );
        this.processingActivityTypesData = processingActivityTypesData;
      }
    },
    closeDrawer() {
      this.dataDetailInfoTables = [];
      this.addAppForm = {};
      this.modalVisible = false;
    },
    async handleChangeAppid(value, index) {
      const { data } = await appIdDetail({ id: index.key });
      this.diForm.setFieldsValue({
        AppidName: data.AppName,
        AppidMaster: data.AppOwner,
        AppidDepartMent: data.AppDepartment,
        BbaAppId: data.BbaAppId,
        BmwAppId: data.BmwAppId,
        FeatherId: data.FeatherId,
      });
    },
    async showCreateRpaMiniModel() {
      // 新增数据字段的弹窗
      if (this.radioValue == 0) {
        // 默认什么都没选
        this.$message.error(this.$t("user.v18"));
      } else if (this.radioValue == 1) {
        // 判断是否有选择DI
        if (!this.diId) {
          this.$message.error(this.$t("user.v19"));
        } else {
          // 新增的数据字段,合并
          await this.submitCreate();
          // 关闭数据弹窗
          this.showDataFields = false;
          // 展开DPIA的弹窗
          this.createQuestionStatus = true;
        }
      } else if (this.radioValue == 2) {
        // 生成新的DI
        await this.submitCreate();
        // 关闭数据弹窗
        this.showDataFields = false;
        // 展开DPIA的弹窗
        this.createQuestionStatus = true;
      }
    },
    async showModel(record) {
      this.modalVisible = true;
      this.modalTitle = this.$t(
        "user.verification-code.required11156677888888"
      );
      const { data: dataInfo } = await rpaDiDetail({
        Id: record.DataLibraryId || record.DetailDataLibraryId,
      });
      if (dataInfo.DataLibraryControllerOther != "") {
        this.otherflag = true;
      } else {
        this.otherflag = false;
      }
      let arr1 = [];
      let arr3 = [];
      if (dataInfo.DataLibraryController == "") {
        arr1 = undefined;
      } else {
        arr1 = dataInfo.DataLibraryController.split(",");
        arr1.forEach((item) => {
          arr3.push(parseInt(item));
        });
      }
      await this.$nextTick();
      this.diForm.setFieldsValue({
        DataLibraryAppidId: dataInfo.DataLibraryAppidId,
        DataLibraryCreateTime: dataInfo.DataLibraryCreatetime,
        DataLibraryUpdateTime: dataInfo.DataLibraryUpdatetime,
        DataLibraryController: arr3,
        DataLibraryControllerOther: dataInfo.DataLibraryControllerOther,
        DataLibraryEnvironment: dataInfo.DataLibraryEnvironment,
        DataLibraryEntities: dataInfo.DataLibraryEntities,
        DataAssetsId: dataInfo.DataAssetsId,
        DataLibraryUser: dataInfo.DataLibraryUser,
        Id: dataInfo.Id,
        BmwAppId: dataInfo.BmwAppId,
        BbaAppId: dataInfo.BbaAppId,
        FeatherId: dataInfo.FeatherId,
      });
      this.handleChangeAppid("", { key: dataInfo.DataLibraryAppidId });

      let tempLists = [];
      await this.$nextTick();
      if (dataInfo.Details) {
        for (var i = 0; i < dataInfo.Details.length; i++) {
          var arr5 = [];
          dataInfo.Details[i].DataCity.split(",").forEach((item) => {
            arr5.push(parseInt(item));
          });
          var arr6 = [];
          dataInfo.Details[i].DataDeposit.split(",").forEach((item) => {
            arr6.push(parseInt(item));
          });
          var arr7 = [];
          dataInfo.Details[i].DataSource.split(",").forEach((item) => {
            arr7.push(parseInt(item));
          });
          var arr8 = [];
          dataInfo.Details[i].DataDestination.split(",").forEach((item) => {
            arr8.push(parseInt(item));
          });
          var tempItems = {
            Id: dataInfo.Details[i].Id,
            key: dataInfo.Details[i].Id,
            DataItemStr: dataInfo.Details[i].DataItemsStr,
            DataItem: dataInfo.Details[i].DataItem,
            DataLevelStr: dataInfo.Details[i].DataLevelStr,
            DataLevel: dataInfo.Details[i].SourceDataLevel, // 数据级别
            DataSensitiveStr: dataInfo.Details[i].DataSensitivityStr, // 数据敏感度
            DataSensitive: dataInfo.Details[i].SourceDataSensitive,
            ...dataInfo.Details[i],
            DataCity: arr5,
            DataDeposit: arr6,
            DataSource: arr7,
            DataDestination: arr8,
          };
          tempLists.push(tempItems);
        }
      }
      this.dataDetailInfoTables = tempLists;
    },
    //添加详情删除
    async delxiangqing(record) {
      try {
        if (record.DataItem == "") {
          this.flagstate = 0;
        }
        if (!record.Id && record.tempId) {
          const dataSource = [...this.diDataLists];
          this.diDataLists = dataSource.filter(
            (item) => item.tempId != record.tempId
          );
          return;
        } else if (this.$route.query.state == "edit") {
          await rpaDelDetail({ Id: record.Id });
          const dataSource = [...this.diDataLists];
          this.diDataLists = dataSource.filter((item) => item.Id != record.Id);
        } else if (this.$route.query.state == "add") {
          const dataSource = [...this.diDataLists];
          this.diDataLists = dataSource.filter((item) => item.Id != record.Id);
        }
        for (let i = 0; i < this.diDataLists.length; i++) {
          if (!this.diDataLists[i].DataAssetsId) {
            this.flagstate = 1;
          } else {
            this.flagstate = 0;
          }
        }
        // 传过来的id直接请求删除api
        this.$message.success(
          this.$t("user.verification-code.required111566110577133")
        );
        // 重新初始化列表刷新数据
      } catch (error) {
        this.$message.error(error);
      } finally {
      }
    },
    async handleCreateQuestionSubmit() {
      const {
        form1: { validateFields },
      } = this;
      // 按钮loading
      this.loading = true;
      // validateFields 是校验form表单数据
      // force: true 是默认所有字段都校验
      // values 表单的值
      validateFields({ force: true }, async (err, values) => {
        if (!err) {
          try {
            const params = { ...values };
            console.log("params", params);
            const { data } = await dpiaQuestionsCreate({
              DpiaRpaId: this.rpaidd,
              DpiaModelId: params.DpiaModelId,
              DpiaName: params.DpiaName,
            });
            this.$message.success(
              this.$t("user.verification-code.required111566110577326")
            );
            this.createQuestionStatus = false;
            this.$router.push({
              path: "/dpia/question",
              query: { id: data.Id },
            });
          } catch (error) {
            this.$message.error(error);
          } finally {
            this.loading = false;
          }
        } else {
          setTimeout(() => {
            this.loading = false;
          }, 600);
        }
      });
    },
    async handleCreateQuestionCancel() {
      this.createQuestionStatus = false;
      this.$router.push({ path: "/rpa" });
    },
    async handleDiChange(e) {
      try {
        var tempLists = [];
        const { data } = await childataItems({ id: e });
        for (var i = 0; i < this.diDataLists.length; i++) {
          if (this.diDataLists[i].DataItemsStr == e) {
            this.diDataLists[i].DataLevelStr = data[0].DateLevel;
            this.diDataLists[i].DataSensitivityStr = data[0].SensitivityLevel;
            this.diDataLists[i].DataItem = e;
          }
          tempLists.push(this.diDataLists[i]);
        }
        this.diDataLists = tempLists;
        console.log(this.diDataLists);
      } catch (error) {
        this.$message.error(error);
      }
    },
    createDataModal() {
      // 新增数据字段执行
      this.del == "1";
      if (this.diDataLists == null) {
        this.diDataLists = [];
      }
      this.diDataLists.push({
        Id: this.diDataLists.length + 1,
        DataSensitivityStr: "-",
        RpaType: 2,
        DataSource: [],
        DataDestination: [],
      });

      console.log("=========> 新增数据字段后的数据样子:", this.diDataLists);
    },
    async handleChangeAssets(id) {
      this.rpaDidataLists = [];
      try {
        const { data } = await dataLibraryDetail({ Id: id });
        console.log("datalist", data);
        let tempLists = [];
        for (var i = 0; i < data.Details.length; i++) {
          console.log("data.Details", data.Details[i]);
          let arr5 = [];
          let arr6 = [];
          let arr7 = [];
          let arr8 = [];
          data.Details[i].DataAssetsId = data.DataAssetsId;
          data.Details[i].DataDeposit.split(",").forEach((item) => {
            arr8.push(parseInt(item));
          });
          data.Details[i].DataSource.split(",").forEach((item) => {
            arr7.push(parseInt(item));
          });
          data.Details[i].DataCity.split(",").forEach((item) => {
            arr5.push(parseInt(item));
          });
          data.Details[i].DataDestination.split(",").forEach((item) => {
            arr6.push(parseInt(item));
          });
          console.log("arr6", arr6);
          data.Details[i].DataDestination = arr6.filter((item) => !isNaN(item));
          data.Details[i].DataSource = arr7.filter((item) => !isNaN(item));
          data.Details[i].DataCity = arr5.filter((item) => !isNaN(item));
          data.Details[i].DataDeposit = arr8.filter((item) => !isNaN(item));
          tempLists.push(data.Details[i]);
        }
        console.log("tempLists", tempLists);
        this.rpaDidataLists = tempLists;
        console.log("this.rpaDidataLists");
        console.log("this.rpaDidataLists", this.rpaDidataLists);
      } catch (error) {
        this.$message.error(error);
        console.log(error);
      }
    },
    handleDiCancel() {
      // DI导入取消
      this.visible = false;
      this.rpaDidataLists = [];
      this.handleChangeAssetsSelect = undefined;
    },
    handleDiSubmit() {
      this.handleDiSubmitStatus = true;
      this.rpaDidataLists = [];
      this.selectedRows.forEach((key, val) => {
        let state = 0;
        this.diDataLists.find((item) => {
          if (item.Id == key.Id) {
            state = 1;
            this.$message.error("数据重复");
            return;
          }
        });
        if (state == 1) {
          // this.$message.error('数据重复')
          return;
        }
        key.DataItemsStr = key.DataItem;
        this.diDataLists.push(key);
      });
      let arr = [];
      this.selectedRows.forEach((item) => {
        if (arr.length > 0) {
          if (arr.findIndex((v) => v.value != item.value)) {
            arr.push(item);
          }
          console.log(arr);
        } else {
          arr.push({
            value: item.DataLibraryId,
            label: item.DataAssetsId,
          });
        }
      });
      this.arr11.push(arr);
      // DI导入提交
      this.visible = false;
      this.rpaDidataLists = [];
      this.handleChangeAssetsSelect = undefined;
    },
    handleFocus() {
      this.placeholderText = "";
    },
    //保存草稿
    submitSave() {
      const {
        form: { validateFields },
      } = this;
      // 按钮loading
      this.loading = true;
      // validateFields 是校验form表单数据
      // force: true 是默认所有字段都校验
      // values 表单的值
      validateFields({ force: false }, async (err, values) => {
        try {
          // 选择新增DI
          this.ifLoading = true;
          if (this.radioValue == 1) {
            if (!this.DiId) {
              // this.$message.error(this.$t('menu.account.logout1122992277'))
            } else {
              console.log("this.diid", this.diid);
              values["DiId"] = this.diid;
            }
          } else {
            values["DiId"] = 0;
          }
          // 将数据做基础的处理
          if (values.RpaActivityCycle != undefined) {
            values.RpaActivityCycle = values.RpaActivityCycle.join();
          }
          if (values.RpaActivityType != undefined) {
            values.RpaActivityType = values.RpaActivityType.join();
          }
          if (values.RpaDataController != undefined) {
            values.RpaDataController = values.RpaDataController.toString();
          }

          if (values.RpaSystemNetwork != undefined) {
            values.RpaSystemNetwork = values.RpaSystemNetwork.toString();
          }
          // DI数据详情
          values.RpaDataDetail = this.diDataLists;
          console.log("values.RpaDataDetail", values.RpaDataDetail);
          let url = [];
          //处理数据流图url
          if (this.fileLists.length > 0) {
            this.fileLists.forEach((item) => {
              let RpaUploadUrlUrl = [];
              RpaUploadUrlUrl = item.url.split("/").splice(-2, 2);
              console.log(RpaUploadUrlUrl, RpaUploadUrlUrl.join("/"));
              url.push({
                RpaUploadUrl: RpaUploadUrlUrl.join("/"),
                RpaUploadType: item.RpaUploadType,
              });
            });
          }
          //处理架构图url
          if (this.RpaSystemFileLists.length > 0) {
            this.RpaSystemFileLists.forEach((item) => {
              let RpaSystemFileListsUrl = [];
              RpaSystemFileListsUrl = item.url.split("/").splice(-2, 2);
              url.push({
                RpaUploadUrl: RpaSystemFileListsUrl.join("/"),
                RpaUploadType: item.RpaUploadType,
              });
            });
          }
          values.RpaUpload = url;
          // values.DiId = 333
          // 指定保存还是提交(1:草稿(Draft),2:上线(Active),3:下线(Offline))
          values["RpaState"] = 1;
          var tempRpaDataDetail = [];
          // for (var i = 0; i < this.diDataLists.length; i++) {
          //   if (
          //     !this.diDataLists[i].DataCity ||
          //     this.diDataLists[i].DataCity.length == 0
          //   ) {
          //     this.$message.error(this.$t("menu.account.logout1122992244"));
          //     return;
          //   }
          //   if (
          //     !this.diDataLists[i].DataDeposit ||
          //     this.diDataLists[i].DataDeposit.length == 0
          //   ) {
          //     this.$message.error(this.$t("menu.account.logout1122992255"));

          //     return;
          //   }
          //   if (
          //     !this.diDataLists[i].DataItem ||
          //     this.diDataLists[i].DataDeposit.length == 0
          //   ) {
          //     this.$message.error(this.$t("menu.account.logout11229922558888"));

          //     return;
          //   }
          //   if (
          //     !this.diDataLists[i].DataSource ||
          //     this.diDataLists[i].DataSource.length == 0
          //   ) {
          //     console.log(this.diDataLists[i].DataSource);
          //     this.$message.error(this.$t("menu.account.logout1122992266"));

          //     return;
          //   }
          //   if (
          //     !this.diDataLists[i].DataDestination ||
          //     this.diDataLists[i].DataDestination.length == 0
          //   ) {
          //     this.$message.error(this.$t("menu.account.logout1122992277"));

          //     return;
          //   }
          // }
          console.log(
            "===============> values.RpaDataDetail:",
            values.RpaDataDetail
          );
          for (var i = 0; i < values.RpaDataDetail.length; i++) {
            // 删除ID
            if (!this.types) {
              delete values.RpaDataDetail[i].Id;
            }
            values.RpaDataDetail[i].RpaId = values.Id;

            // 公共城市字段
            values.RpaDataDetail[i].DataItem = parseInt(
              values.RpaDataDetail[i].DataItem
            );
            var DataCityType = typeof values.RpaDataDetail[i].DataCity;
            if (DataCityType == "object") {
              console.log("DataCityType:", DataCityType);
              values.RpaDataDetail[i].DataCity =
                values.RpaDataDetail[i].DataCity.join(",");
            } else {
              values.RpaDataDetail[i].DataCity =
                values.RpaDataDetail[i].DataCity?.toString();
            }

            // 数据存放地

            var DataDepositType = typeof values.RpaDataDetail[i].DataDeposit;
            if (DataDepositType == "object") {
              values.RpaDataDetail[i].DataDeposit =
                values.RpaDataDetail[i].DataDeposit.join(",");
            } else {
              values.RpaDataDetail[i].DataDeposit =
                values.RpaDataDetail[i].DataDeposit?.toString();
            }

            // 数据来源
            var DataSourceType = typeof values.RpaDataDetail[i].DataSource;
            if (DataSourceType == "object") {
              values.RpaDataDetail[i].DataSource =
                values.RpaDataDetail[i].DataSource.join(",");
            } else {
              values.RpaDataDetail[i].DataSource =
                values.RpaDataDetail[i].DataSource?.toString();
            }

            // 数据目的地
            var DataDestinationType =
              typeof values.RpaDataDetail[i].DataDestination;
            if (DataDestinationType == "object") {
              console.log("DataDestinationType:", DataDestinationType);
              values.RpaDataDetail[i].DataDestination =
                values.RpaDataDetail[i].DataDestination.join(",");
            } else {
              values.RpaDataDetail[i].DataDestination =
                values.RpaDataDetail[i].DataDestination?.toString();
            }

            if ("DataLibraryId" in values.RpaDataDetail[i]) {
              // 如果是导入DI，就会有这个值
              if (values.RpaDataDetail[i].DataLibraryId != 0) {
                values.RpaDataDetail[i].DataDestination =
                  values.RpaDataDetail[i].DataDestination?.toString();
                values.RpaDataDetail[i].DataItem = parseInt(
                  values.RpaDataDetail[i].DataItem
                );
                values.RpaDataDetail[i].DataSource =
                  values.RpaDataDetail[i].DataSource?.toString();
                values.RpaDataDetail[i].DetailDataLibraryId =
                  values.RpaDataDetail[i].DataLibraryId;
              }
              values.RpaDataDetail[i].DataDestination =
                values.RpaDataDetail[i].DataDestination?.toString();
            } else {
              // 新增数据字段
              values.RpaDataDetail[i].DataDestination =
                values.RpaDataDetail[i].DataDestination?.toString();
              values.RpaDataDetail[i].DataCity =
                values.RpaDataDetail[i].DataCity?.toString();
              values.RpaDataDetail[i].DataSource =
                values.RpaDataDetail[i].DataSource?.toString();
              values.RpaDataDetail[i].DataItem = parseInt(
                values.RpaDataDetail[i].DataItem
              );
            }

            tempRpaDataDetail.push(values.RpaDataDetail[i]);
          }
          values.RpaDataDetail = tempRpaDataDetail;
          const { data } = await rpaCreate({ ...values });
          console.log("caogao---", data);
          this.$message.success(
            this.$t("user.verification-code.required111566110577308")
          );
          // 返回列表
          this.ifFlag = true;
          this.$router.push(this.toPage || "/rpa/service");
        } catch (error) {
          console.log(error);
          this.$message.error(error);
        } finally {
          this.loading = false;
          this.ifLoading = false;
        }
      });
    },
    // 取消
    cancellation() {
      this.$router.go(-1);
    },
    //提交
    submitCreate() {
      const {
        form: { validateFields },
      } = this;
      // 按钮loading
      this.loading = true;
      // validateFields 是校验form表单数据
      // force: true 是默认所有字段都校验
      // values 表单的值
      validateFields({ force: true }, async (err, values) => {
        if (!err) {
          try {
            let resValue = deepClone(values);
            // 将数据做基础的处理
            if (resValue.RpaActivityCycle != undefined) {
              resValue.RpaActivityCycle = resValue.RpaActivityCycle.join();
            }
            if (resValue.RpaActivityType != undefined) {
              resValue.RpaActivityType = resValue.RpaActivityType.join();
            }
            if (resValue.RpaDataController != undefined) {
              resValue.RpaDataController =
                resValue.RpaDataController.toString();
            }
            if (resValue.RpaSystemNetwork != undefined) {
              resValue.RpaSystemNetwork = resValue.RpaSystemNetwork.toString();
            }
            let url = [];
            //处理数据流图url
            if (this.fileLists.length > 0) {
              this.fileLists.forEach((item) => {
                let RpaUploadUrlUrl = [];
                RpaUploadUrlUrl = item.url.split("/").splice(-2, 2);
                url.push({
                  RpaUploadUrl: RpaUploadUrlUrl.join("/"),
                  RpaUploadType: item.RpaUploadType,
                });
              });
            }
            //处理架构图url
            if (this.RpaSystemFileLists.length > 0) {
              this.RpaSystemFileLists.forEach((item) => {
                let RpaSystemFileListsUrl = [];
                RpaSystemFileListsUrl = item.url.split("/").splice(-2, 2);
                url.push({
                  RpaUploadUrl: RpaSystemFileListsUrl.join("/"),
                  RpaUploadType: item.RpaUploadType,
                });
              });
            }
            // 判断有没有DIID，有就带进去
            if (this.diId) {
              resValue["DiId"] = this.diId;
            } else {
              resValue["DiId"] = 0;
            }
            resValue.RpaUpload = url;
            // resValue.DiId = 333
            // 指定保存还是提交(1:草稿(Draft),2:上线(Active),3:下线(Offline))
            resValue.RpaState = 2;
            // DI数据详情
            resValue.RpaDataDetail = deepClone(this.diDataLists);
            var tempRpaDataDetail = [];
            if (
              resValue.RpaDataDetail != null &&
              resValue.RpaDataDetail != undefined
            ) {
              for (var i = 0; i < resValue.RpaDataDetail.length; i++) {
                // 删除ID
                if (!this.types) {
                  delete resValue.RpaDataDetail[i].Id;
                }
                resValue.RpaDataDetail[i].RpaId = resValue.Id;

                if (
                  Object.keys(resValue.RpaDataDetail[i]).indexOf(
                    "DataLibraryId"
                  ) != -1
                ) {
                  if (resValue.RpaDataDetail[i].DataLibraryId != 0) {
                    resValue.RpaDataDetail[i].DetailDataLibraryId =
                      resValue.RpaDataDetail[i].DataLibraryId;
                    resValue.RpaDataDetail[i].DataItem = parseInt(
                      resValue.RpaDataDetail[i].DataItem
                    );
                  }
                } else {
                  resValue.RpaDataDetail[i].DataItem = parseInt(
                    resValue.RpaDataDetail[i].DataItem
                  );
                }
                // 公共城市字段
                var DataCityType = typeof resValue.RpaDataDetail[i].DataCity;
                if (DataCityType == "object") {
                  console.log("DataCityType:", DataCityType);
                  resValue.RpaDataDetail[i].DataCity =
                    resValue.RpaDataDetail[i].DataCity.join(",");
                } else {
                  resValue.RpaDataDetail[i].DataCity =
                    resValue.RpaDataDetail[i].DataCity.toString();
                }

                // 数据存放地
                var DataDepositType =
                  typeof resValue.RpaDataDetail[i].DataDeposit;
                if (DataDepositType == "object") {
                  resValue.RpaDataDetail[i].DataDeposit =
                    resValue.RpaDataDetail[i].DataDeposit.join(",");
                } else {
                  resValue.RpaDataDetail[i].DataDeposit =
                    resValue.RpaDataDetail[i].DataDeposit.toString();
                }

                // 数据来源
                var DataSourceType =
                  typeof resValue.RpaDataDetail[i].DataSource;
                if (DataSourceType == "object") {
                  resValue.RpaDataDetail[i].DataSource =
                    resValue.RpaDataDetail[i].DataSource.join(",");
                } else {
                  resValue.RpaDataDetail[i].DataSource =
                    resValue.RpaDataDetail[i].DataSource.toString();
                }

                // 数据目的地
                var DataDestinationType =
                  typeof resValue.RpaDataDetail[i].DataDestination;
                if (DataDestinationType == "object") {
                  console.log("DataDestinationType:", DataDestinationType);
                  resValue.RpaDataDetail[i].DataDestination =
                    resValue.RpaDataDetail[i].DataDestination.join(",");
                } else {
                  resValue.RpaDataDetail[i].DataDestination =
                    resValue.RpaDataDetail[i].DataDestination.toString();
                }
                tempRpaDataDetail.push(
                  Object.assign(resValue.RpaDataDetail[i])
                );
              }
              resValue.RpaDataDetail = tempRpaDataDetail;
            }

            // RPA业务目的
            let { data } = await rpaCreate(deepClone(resValue));
            this.rpaidd = data;
            resValue.RpaObjective = this.$t(resValue.RpaObjective);
            this.createDataModal = true;
            let arr = Array(resValue.RpaId, resValue.RpaName);
            // 赋值
            await this.$nextTick();
            this.form1.setFieldsValue({
              DpiaRpaId: arr.join("/"),
              DpiaModelId: this.dpiaSelectListsData[0].value,
              DpiaName: "DPIA-" + arr.join("/"),
            });
          } catch (error) {
            console.log(error);
            this.$message.error(error);
          } finally {
            this.loading = false;
          }
        } else {
          setTimeout(() => {
            this.loading = false;
          }, 600);
        }
      });
    },
    async openModal() {
      if (this.diDataLists == null) {
        this.diDataLists = [];
      }
      this.getAllInfo();
      this.visible = true;
    },
    async getAllInfo() {
      const { data: dataItemsSearchData } = await dccDataItemsSelect({
        types: 1,
      });
      this.dataItemsSearchData = [];
      this.dataItemsSearchData = dataItemsSearchData;
      const { data: appidLists } = await appIdCreatexl({
        content: "",
        types: 1,
      });
      this.appidLists = appidLists;
    },
    strToInt(strArr) {
      let arrs = [];
      strArr.forEach((key, val) => {
        arrs.push(parseInt(key));
      });
      return arrs;
    },
    async init() {
      try {
        this.userList = [];
        const Lang = this.$route.query.itLang;
        if (Lang) {
          this.itLang = JSON.parse(Lang);
        } else {
          // 加载数据处理活动周期
          const { data: dataProcessingActivityCycleData } =
            await configurationSelect({ state: 6 });
          this.dataProcessingActivityCycleData =
            dataProcessingActivityCycleData;
          // 加载数据处理活动类型
          const { data: processingActivityTypesData } =
            await configurationSelect({ state: 7 });
          this.processingActivityTypesData = processingActivityTypesData;
        }
        this.buttonState = "";
        //di下拉
        this.diList = [];
        // 数据流图文件上传
        this.fileLists = [];
        //架构图文件上传
        this.RpaSystemFileLists = [];
        // 加载RPA下拉
        const { data: rpaListData } = await rpaSelectLists();
        this.rpaListData = rpaListData;
        // 加载DPIA下拉
        const { data: dpiaSelectListsData } = await dpiaSelectLists();
        this.dpiaSelectListsData = dpiaSelectListsData;
        // 存放地
        const { data: fonfigurationItemsContent } = await configurationSelect({
          state: 4,
        });
        this.fonfigurationItemsContent = fonfigurationItemsContent;
        // 进入加载
        this.loading = true;
        //数据详情的数据字段
        const { data: dataItemsSearchData } = await dccDataItemsSelect({
          types: 1,
        });
        this.dataItemsSearchData = [];
        this.dataItemsSearchData = dataItemsSearchData;
        // 获取入参
        const stateCode = this.$route.query.state;
        const id = this.$route.query.id;
        if (stateCode == "add") {
          this.pageTitle = "user.verification-code.required111566110577134";
          this.types = false;
          await this.$nextTick();
          /**
           * 初始化DPIA的弹窗跟RPA的数据内容
           * 没有写入的内容都是undefind,保证都初始化过
           * @type {{RpaId: any, Id: any}}
           */
          // this.initFromData = {
          //   ...{
          //     RpaId: data.RpaId,
          //     Id: data.Id,
          //   },
          // };
          this.initDpiaFromData = {
            ...{
              DpiaRpaId: this.DpiaRpaId,
              DpiaName: "DPIA-" + this.DpiaRpaId,
            },
          };
          await this.$nextTick();
          // 赋值行为
          this.form.setFieldsValue(this.initFromData);
          this.form1.setFieldsValue(this.initDpiaFromData);
          // 绑定内容
          // this.DpiaRpaId = data.RpaId;
          // this.rpaId = data.Id;
        } else if (stateCode === "edit") {
          this.pageTitle = "user.verification-code.required111566110577135";
          this.types = true;
          this.createQuestionStatus = false;
          // 修改
          try {
            // 读取数据
            this.rpaId = id;
            this.rpaidd = id;
            await this.$nextTick();
            const { data: rpaInfo } = await rpaDetail({ Id: id });
            rpaInfo.RpaDataDetail
              ? rpaInfo.RpaDataDetail.forEach((item) => {
                item.DataItemsStr =
                  item.DataItem === 0 ? undefined : item.DataItem;
              })
              : "";
            this.rpaInfo = rpaInfo;
            this.initFromData = rpaInfo;
            // this.rpaId = id
            // 回显本业务是否涉及线上系统或平台
            this.changvalue = rpaInfo.RpaCollectionChannels;
            if (
              rpaInfo.RpaObjective === "其他【请补充说明】" ||
              rpaInfo.RpaObjective === "bussic.target.h"
            ) {
              this.otherPurpose = true;
            } else {
              this.otherPurpose = false;
            }
            if (rpaInfo.RpaLeaderRetinue) {
              this.userList.push(
                {
                  value: rpaInfo.RpaLeaderMaster,
                  label: rpaInfo.RpaLeaderMasterStr,
                },
                {
                  value: rpaInfo.RpaLeaderRetinue,
                  label: rpaInfo.RpaLeaderRetinueStr,
                }
              );
            } else {
              this.userList.push({
                value: rpaInfo.RpaLeaderMaster,
                label: rpaInfo.RpaLeaderMasterStr,
              });
            }

            if (rpaInfo.RpaUpload) {
              rpaInfo.RpaUpload.forEach((item, index) => {
                if (item.RpaUploadType == 1) {
                  let name = item.RpaUploadUrl.split("/").slice(-1);
                  this.fileLists.push({
                    Id: item.Id,
                    uid: index,
                    name: name,
                    status: "done",
                    url: item.RpaUploadUrl,
                    RpaUploadType: 1,
                  });
                } else {
                  let name = item.RpaUploadUrl.split("/").slice(-1);
                  this.RpaSystemFileLists.push({
                    Id: item.Id,
                    uid: index,
                    name: name,
                    status: "done",
                    url: item.RpaUploadUrl,
                    RpaUploadType: 2,
                  });
                }
              });
            }
            rpaInfo.RpaActivityCycle = this.strToInt(
              rpaInfo.RpaActivityCycle.split(",")
            );
            rpaInfo.RpaActivityType = this.strToInt(
              rpaInfo.RpaActivityType.split(",")
            );
            let RpaDataController = [];
            if (rpaInfo.RpaDataControllerOther != "") {
              this.otherflag = true;
            } else if (rpaInfo.RpaDataControllerOther == "") {
              this.otherflag = false;
            }
            if (rpaInfo.RpaDataController) {
              rpaInfo.RpaDataController.split(",").forEach((item) => {
                RpaDataController.push(parseInt(item));
              });
            }

            // 数据控制者
            rpaInfo.RpaDataController = RpaDataController
              ? RpaDataController
              : undefined;
            //业务主负责人
            rpaInfo.RpaLeaderMaster = rpaInfo.RpaLeaderMaster
              ? rpaInfo.RpaLeaderMaster
              : undefined;
            // 处理活动周期
            rpaInfo.RpaProcessingActivityCycle =
              rpaInfo.RpaProcessingActivityCycle
                ? rpaInfo.RpaProcessingActivityCycle
                : undefined;
            // 处理活动的系统或网络环境
            rpaInfo.RpaSystemNetwork = parseInt(rpaInfo.RpaSystemNetwork)
              ? parseInt(rpaInfo.RpaSystemNetwork)
              : undefined;
            // 涉及个人信息主体的数量
            rpaInfo.RpaNumber =
              rpaInfo.RpaNumber == 0 ? undefined : rpaInfo.RpaNumber;
            // 涉及敏感个人信息主体的数量
            rpaInfo.RpaSensitiveNumber =
              rpaInfo.RpaSensitiveNumber == 0
                ? undefined
                : rpaInfo.RpaSensitiveNumber;
            // 本次业务活动是否涉及线上处理活动
            rpaInfo.RpaCollectionChannels =
              rpaInfo.RpaCollectionChannels == 0
                ? undefined
                : rpaInfo.RpaCollectionChannels;
            // rpaInfo.RpaLeaderMaster = parseInt(rpaInfo.RpaLeaderMaster)
            rpaInfo.RpaLeaderRetinue = rpaInfo.RpaLeaderRetinue
              ? rpaInfo.RpaLeaderRetinue
              : undefined;
            if (Array.isArray(rpaInfo.RpaDataDetail)) {
              //数据详情里面的城市，数据来源 ，数据目的地
              let arr = [];
              this.tempId = 1;
              rpaInfo.RpaDataDetail.forEach((item) => {
                // item.DataDeposit = parseInt(item.DataDeposit)
                //目的地
                if (item.Id === 0) {
                  item.tempId = ++this.tempId;
                }
                if (item.DataDeposit) {
                  item.DataDeposit = item.DataDeposit.split(",").reduce(
                    (pre, cur) => {
                      pre.push(parseInt(cur));
                      return pre;
                    },
                    []
                  );
                } else {
                  item.DataDeposit = undefined;
                }
                // item.DataCity = parseInt(item.DataCity)
                //城市
                if (item.DataCity) {
                  item.DataCity = item.DataCity.split(",").reduce(
                    (pre, cur) => {
                      pre.push(parseInt(cur));
                      return pre;
                    },
                    []
                  );
                } else {
                  item.DataCity = undefined;
                }
                // item.DataDestination = parseInt(item.DataDestination)

                //目的地
                if (item.DataDestination) {
                  item.DataDestination = item.DataDestination.split(",").reduce(
                    (pre, cur) => {
                      pre.push(parseInt(cur));
                      return pre;
                    },
                    []
                  );
                } else {
                  item.DataDestination = undefined;
                }
                //数据来源
                if (item.DataSource) {
                  item.DataSource = item.DataSource.split(",").reduce(
                    (pre, cur) => {
                      pre.push(parseInt(cur));
                      return pre;
                    },
                    []
                  );
                } else {
                  item.DataSource = undefined;
                }
                arr.push(item);
              });
              this.diDataLists = arr;
              console.log("arrrrr", arr);
              // this.diList=[...new Set(this.arr11)]
              console.log("this.diList", this.diList);
            }
            await this.$nextTick();
            if (!rpaInfo.RpaObjective) {
              rpaInfo.RpaObjective = undefined;
            }
            this.form.setFieldsValue(rpaInfo);
          } catch (error) {
            this.$message.error(error);
            console.log(error);
          } finally {
            this.loading = false;
          }
        } else {
          this.types = true;
          this.createQuestionStatus = false;
          this.disabled = true;
          // 查看
          try {
            // 读取数据
            this.pageTitle = "rpa.detail";
            this.rpaId = id;
            const { data: rpaInfo } = await rpaDetail({ Id: id });
            this.rpaInfo = rpaInfo;
            rpaInfo.RpaDataDetail
              ? rpaInfo.RpaDataDetail.forEach((item) => {
                item.DataItemsStr =
                  item.DataItem === 0 ? undefined : item.DataItem;
              })
              : "";
            // 获得列表数据 不走这步会全部是数字
            const { data: appidLists } = await appIdCreatexl({
              content: "",
              types: 1,
            });
            this.appidLists = appidLists;
            if (rpaInfo.RpaUpload) {
              rpaInfo.RpaUpload.forEach((item, index) => {
                if (item.RpaUploadType == 1) {
                  let name = item.RpaUploadUrl.split("/").slice(-1);
                  this.fileLists.push({
                    Id: item.Id,
                    uid: index,
                    name: name,
                    status: "done",
                    url: item.RpaUploadUrl,
                  });
                } else {
                  let name = item.RpaUploadUrl.split("/").slice(-1);
                  this.RpaSystemFileLists.push({
                    Id: item.Id,
                    uid: index,
                    name: name,
                    status: "done",
                    url: item.RpaUploadUrl,
                  });
                }
              });
            }
            rpaInfo.RpaActivityCycle = this.strToInt(
              rpaInfo.RpaActivityCycle.split(",")
            );
            rpaInfo.RpaActivityType = this.strToInt(
              rpaInfo.RpaActivityType.split(",")
            );
            let RpaDataController = [];
            if (rpaInfo.RpaDataControllerOther != "") {
              this.otherflag = true;
            } else if (rpaInfo.RpaDataControllerOther == "") {
              this.otherflag = false;
            }
            if (rpaInfo.RpaDataController) {
              rpaInfo.RpaDataController.split(",").forEach((item) => {
                RpaDataController.push(parseInt(item));
              });
            }
            // 回显本业务是否涉及线上系统或平台
            this.changvalue = rpaInfo.RpaCollectionChannels;
            if (
              rpaInfo.RpaObjective === "其他【请补充说明】" ||
              rpaInfo.RpaObjective === "bussic.target.h"
            ) {
              this.otherPurpose = true;
            } else {
              this.otherPurpose = false;
            }
            await this.$nextTick();
            // 数据控制者
            rpaInfo.RpaDataController = RpaDataController
              ? RpaDataController
              : undefined;
            //业务主负责人
            if (rpaInfo.RpaLeaderMasterStr === "") {
              rpaInfo.RpaLeaderMaster = undefined;
            } else {
              rpaInfo.RpaLeaderMaster = rpaInfo.RpaLeaderMaster
                ? rpaInfo.RpaLeaderMaster
                : undefined;
            }
            // 处理活动周期
            rpaInfo.RpaProcessingActivityCycle =
              rpaInfo.RpaProcessingActivityCycle
                ? rpaInfo.RpaProcessingActivityCycle
                : undefined;
            // 处理活动的系统或网络环境
            rpaInfo.RpaSystemNetwork = parseInt(rpaInfo.RpaSystemNetwork)
              ? parseInt(rpaInfo.RpaSystemNetwork)
              : undefined;
            // 涉及个人信息主体的数量
            rpaInfo.RpaNumber =
              rpaInfo.RpaNumber == 0 ? undefined : rpaInfo.RpaNumber;
            // 涉及敏感个人信息主体的数量
            rpaInfo.RpaSensitiveNumber =
              rpaInfo.RpaSensitiveNumber == 0
                ? undefined
                : rpaInfo.RpaSensitiveNumber;
            // 本次业务活动是否涉及线上处理活动
            rpaInfo.RpaCollectionChannels =
              rpaInfo.RpaCollectionChannels == 0
                ? undefined
                : rpaInfo.RpaCollectionChannels;
            // rpaInfo.RpaLeaderMaster = parseInt(rpaInfo.RpaLeaderMaster)
            rpaInfo.RpaLeaderRetinue = rpaInfo.RpaLeaderRetinue
              ? rpaInfo.RpaLeaderRetinue
              : undefined;
            this.form.setFieldsValue(rpaInfo);
            if (Array.isArray(rpaInfo.RpaDataDetail)) {
              //数据详情里面的城市，数据来源 ，数据目的地
              let arr = [];
              // 给数据详情赋值
              rpaInfo.RpaDataDetail.forEach((item) => {
                // item.DataDeposit = parseInt(item.DataDeposit)
                //目的地
                if (item.DataDeposit) {
                  item.DataDeposit = item.DataDeposit.split(",").reduce(
                    (pre, cur) => {
                      pre.push(parseInt(cur));
                      return pre;
                    },
                    []
                  );
                } else {
                  item.DataDeposit = undefined;
                }
                // item.DataCity = parseInt(item.DataCity)
                //城市
                if (item.DataCity) {
                  item.DataCity = item.DataCity.split(",").reduce(
                    (pre, cur) => {
                      pre.push(parseInt(cur));
                      return pre;
                    },
                    []
                  );
                } else {
                  item.DataCity = undefined;
                }
                // item.DataDestination = parseInt(item.DataDestination)

                //目的地
                if (item.DataDestination) {
                  item.DataDestination = item.DataDestination.split(",").reduce(
                    (pre, cur) => {
                      pre.push(parseInt(cur));
                      return pre;
                    },
                    []
                  );
                } else {
                  item.DataDestination = undefined;
                }
                //数据来源
                if (item.DataSource) {
                  item.DataSource = item.DataSource.split(",").reduce(
                    (pre, cur) => {
                      pre.push(parseInt(cur));
                      return pre;
                    },
                    []
                  );
                } else {
                  item.DataSource = undefined;
                }
                arr.push(item);
              });
              this.diDataLists = arr;
            }
            // 没有值的时候是空
          } catch (error) {
            this.$message.error(error);
            console.log(error);
          } finally {
            this.loading = false;
          }
        }
        // 加载数据控制者数据
        const { data: systemControllerSourceData } = await configurationSelect({
          state: 11,
        });

        /**
         * 1、加载收集渠道数据
         * 2、加载数据处理活动周期
         * 3、加载数据处理活动类型
         */
        const {
          collectionChannelsSourceData,
          dataProcessingActivityCycleData,
          processingActivityTypesData,
        } = await getSourceData(this.$route.query.itLang);
        this.collectionChannelsSourceData = collectionChannelsSourceData;
        this.dataProcessingActivityCycleData = dataProcessingActivityCycleData;
        this.processingActivityTypesData = processingActivityTypesData;

        // 加载数据资产名称APP名称下拉
        const { data: rpaSelectAssetNameData } = await rpaSelectAssetName();
        // 城市
        const { data: sonfigurationItemsContent } = await configurationSelect({
          state: 3,
        });
        this.sonfigurationItemsContent = sonfigurationItemsContent;
        this.systemControllerSourceData = systemControllerSourceData;
        this.collectionChannelsSourceData = collectionChannelsSourceData;
        this.rpaSelectAssetNameData = rpaSelectAssetNameData;
        setTimeout(() => {
          this.changeselect(this.rpaInfo.RpaDataController);
        });
        if (stateCode === "detail") {
          // 详情,打开数据返显
          this.detailStatus = true;
        }
      } catch (error) {
        this.$message.error(error);
        console.log(error);
      } finally {
        this.loading = false;
      }
    },

    async rollback() {
      this.del == "0";
      this.ifFlag = true;
      // if (this.$route.query.state == "add") {
      //   await rpaDelcsai({ Id: this.rpaId });
      // }
      this.$router.push(this.toPage || "/rpa/service");
      // this.$message.warning(this.$t("app.setting.themecolor.rr100"));
    },
    //文件上传
    async handleChange(e) {
      // 上传提交
      this.uploadLoading = true;
      let formdata = new FormData();
      formdata.append("file", e.file);
      try {
        const { status, data } = await axios({
          url: `${this.env}/v1/oss/upload`,
          method: "post",
          data: formdata,
          headers: {
            token: storage.get(ACCESS_TOKEN),
            tokens: storage.get("bmwToken") || "",
          },
        });
        if (status === 200 && data.code == 1) {
          if (data.data != "") {
            await this.$nextTick();
            var files = data.data;
            var index = this.fileLists.length;
            if (files != "" && files != undefined) {
              var fileName = files.split("/");
              this.fileLists.push({
                uid: index + 1,
                name: fileName[fileName.length - 1],
                status: "done",
                url: data.Url + data.data,
                RpaUploadType: 1,
              });
            }
          }
        } else {
          this.$message.error("上传失败");
        }
      } catch (error) {
        console.log(error);
        this.$message.error(error);
      } finally {
        this.uploadLoading = false;
      }
      console.log(this.fileLists);
    },
    //删除上传文件
    async fn(file) {
      console.log("1");
      console.log("file", file);
      const index = this.fileLists.indexOf(file);
      this.fileLists.splice(index, 1);
      await rpaFileDelete({ Id: file.Id });
      return true;
    },
    async RpaSystemHandleChange(e) {
      // 架构图上传提交
      this.uploadLoading = true;
      let formdata = new FormData();
      formdata.append("file", e.file);
      try {
        const { status, data } = await axios({
          url: `${this.env}/v1/oss/upload`,
          method: "post",
          data: formdata,
          headers: {
            token: storage.get(ACCESS_TOKEN),
            tokens: storage.get("bmwToken") || "",
          },
        });
        if (status === 200 && data.code === 1) {
          if (data.data !== "") {
            await this.$nextTick();
            var files = data.data;
            var index = this.RpaSystemFileLists.length;
            if (files !== "" && files !== undefined) {
              var fileName = files.split("/");
              this.RpaSystemFileLists.push({
                uid: index + 1,
                name: fileName[fileName.length - 1],
                status: "done",
                url: data.Url + data.data,
                RpaUploadType: 2,
              });
            }
          }
        } else {
          this.$message.error("上传失败");
        }
      } catch (error) {
        this.$message.error(error);
      } finally {
        this.uploadLoading = false;
      }
    },
    async fn1(file) {
      const index = this.RpaSystemFileLists.indexOf(file);
      this.RpaSystemFileLists.splice(index, 1);
      await rpaFileDelete({ Id: file.Id });
      return true;
    },
    //新增数据字段弹窗关闭
    closeDataFields() {
      this.showDataFields = false;
    },
    radioChange() {
      if (this.radioValue == 2) {
        this.disabled1 = true;
        this.radioValueCheck = true;
        this.diId = "";
      } else {
        this.disabled1 = false;
      }
    },
    //数据控制者是否出现other获取
    changeselect(value) {
      if (value) {
        let item2 = [];
        value.forEach((item) => {
          this.systemControllerSourceData.forEach((item1) => {
            if (item == item1.value) {
              item2.push(item1.label);
            }
          });
        });

        if (item2.includes("Other")) {
          this.otherflag = true;
        } else {
          this.otherflag = false;
        }
      }
    },
    changePurposeSelect(val) {
      if (val === "bussic.target.h") {
        this.otherPurpose = true;
      } else {
        this.otherPurpose = false;
      }
    },
    async positionSearch(content) {
      let { data } = await configurationItemsFind({
        content,
        state: 4,
        types: this.lang === "zh-CN" ? undefined : 1,
      });
      this.fonfigurationItemsContent = data;
    },
    batchup() {
      this.ifLoading = true;
      this.batchUpForm.resetFields();
      this.checkedValues = [];
      this.batchVisible = true;
      this.ifLoading = false;
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    onChange(checkedValues) {
      this.checkedValues = checkedValues;
      this.btnDisabled = false;
      this.$nextTick(() => {
        checkedValues.forEach((element) => {
          let item = this.batchUpForm.getFieldValue(element);
          if (
            item === undefined ||
            !item ||
            (item instanceof Array && !item.length)
          ) {
            this.btnDisabled = true;
          }
        });
      });
    },
    close() {
      this.batchVisible = false;
    },
    submit() {
      let changeList = this.batchUpForm.getFieldsValue(this.checkedValues);
      this.diDataLists.forEach((item) => {
        if (this.selectedRowKeys.includes(item.Id)) {
          for (const key in changeList) {
            item[key] = changeList[key];
          }
        }
      });
      this.close();
    },
    onSelectAll(ifAll) {
      if (ifAll) {
        this.selectedRowKeys = this.diDataLists.map((item) => {
          return item.Id;
        });
      } else {
        this.selectedRowKeys = [];
      }
    },
    inputBlur(e) {
      setTimeout(() => {
        this.inputShow = false;
        this.$nextTick(() => {
          this.inputShow = true;
        });
      });
    },
  },
  // 路由守卫监听离开当前页面的操作
  beforeRouteLeave(to, from, next) {
    // 当查看时可以直接返回，或者保存后可以返回
    this.toPage = to;
    if (this.disabled || this.ifFlag) {
      next(); // Allow the navigation to proceed
    } else {
      this.ifvisible = true;
      next(false); // Prevent the navigation
    }
  },
};
</script>
<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.card {
  display: flex;
  align-items: center;
  border-radius: 8px;
  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  padding: 20px;
  padding-right: 150px;

  h4 {
    font-size: 30px;
  }

  p {
    font-size: 16px;
    color: #999;
  }
}

/deep/ .drawer-form {
  margin-bottom: 50px;

  .ant-form-item {
    margin-right: 10px;
  }

  .ant-form-item-label {
    display: inline-block;
    line-height: 20px;
    width: 100px;
    margin-right: 10px;
    margin-top: 10px;
    margin-left: 10px;
  }
}

.checkbox {
  background: #eee;
  padding: 10px;
  margin-top: 16px;
  position: relative;
  top: -10px;
  left: -10px;

  .ant-form-item-label {
    display: inline-block;
    line-height: 40px;
    width: 150px;
    // margin-right: 10px;
  }
}

/deep/ .ant-table-thead {
  background: #f4f7ff;
  font-weight: 700;
}

.import-butoon {
  margin-top: 13px;
}

.table-di {
  margin-top: 13px;
}

.ty {
  width: 13px;
  height: 13px;
  opacity: 1;
  background: rgba(255, 255, 255, 1);
  border: 4px solid #5076a5;
  border-radius: 50%;
}

.tags {
  left: 298px;
  top: 288px;
  width: 6px;
  height: 14px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(0, 80, 247, 1);
}

/deep/ .shuju {
  margin-left: 10px !important;
}

/deep/ [data-v-23a62919] .drawer-form .ant-form-item {
  margin-right: 90px !important;
}

/deep/ [data-v-23a62919] .drawer-form .ant-form-item-label {
  display: inline-block;
  line-height: 20px;
  width: 100px;
  margin-right: 10px;
  margin-top: 10px;
  margin-left: 10px;
  overflow: visible !important;
}

/deep/ element.style {
  width: 178px;
  margin-left: 160px !important;
}

/deep/ .drawer-form .ant-form-item-label {
  display: inline-block;
  line-height: 20px;
  width: 145px !important;
  margin-right: 10px;
  margin-top: 10px;
  margin-left: 10px;
  overflow: visible !important;
}

.zhushi {
  background-color: skyblue;
  float: left;
  z-index: 99;
  width: 200px;
  position: absolute;
  top: -40px;
  left: 662px;
}

.a-checkbox-group {
  display: flex;
  flex-direction: row;
}

.a-checkbox-group-1 {
  display: flex;
  flex-direction: column;
}

/deep/ .ant-checkbox+span {
  /* padding-right: 8px; */
  /* padding-left: 8px; */
}

.dlex {
  display: flex;
  justify-content: space-evenly;
}

.conter {
  position: relative;
}

.letop {
  position: absolute;
  top: -40px;
  left: 30px;
  z-index: 15;
}

.title-content {
  text-align: center;

  .little-tag {
    font-size: 14px;

    .blue-content {
      color: #1940b4;
    }

    max-width: 150px;
    transform: scale(0.9);
  }
}

:deep(.ant-form-item) {
  margin-bottom: 0;
}

.batchup-btn {
  margin-top: 10px;
  margin-left: -10px;
}

.ant-checkbox-group {
  width: 100%;
}

.ant-form {
  margin-top: 10px;

  :deep(.flex-row) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

    .ant-checkbox {
      width: 20px;
    }

    .ant-form-item {
      margin-bottom: 0;
      flex: 1;
      display: flex;
      align-items: center;

      .ant-col.ant-form-item-control-wrapper {
        width: 41.66666667%;
        display: block;
      }
    }
  }
}

.line {
  width: 100%;
  height: 1px;
  margin: 10px 0 10px -10px;
  background-color: #9a9a9a;
}

:deep(.ant-descriptions-view) {

  .ant-descriptions-item-label,
  .ant-descriptions-item-content {
    color: #9a9a9a;
  }
}

.big-box {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
